CSS Borders

By /

In this chapter, you will learn how to add borders around HTML elements. Borders are useful when you want to separate elements or make them stand out on a web page. Let’s understand how CSS borders work step by step.

What is a CSS Border?

A border is a line that appears around an HTML element. For example:

p {
  border: 2px solid black;
}

This adds a black border around the paragraph.

A border usually has three main parts:

  • Width – How thick the border is.
  • Style – How the border looks.
  • Color – The color of the border.

Let’s look at each one.

1. Border Style

The border-style property is used to define the style of a border.

For example:

p {
  border-style: solid;
}

Some commonly used border styles are:

  • solid
  • dotted
  • dashed
  • double

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Border Styles</title>

  <style>
    .solid {
      border-style: solid;
    }

    .dotted {
      border-style: dotted;
    }

    .dashed {
      border-style: dashed;
    }

    .double {
      border-style: double;
    }
  </style>
</head>

<body>

  <p class="solid">This has a solid border.</p>

  <p class="dotted">This has a dotted border.</p>

  <p class="dashed">This has a dashed border.</p>

  <p class="double">This has a double border.</p>

</body>
</html>

Each paragraph will have a different border style.

2. Border Width

The border-width property is used to control how thick the border is. For example:

p {
  border-style: solid;
  border-width: 3px;
}

Here, the border is 3px thick. You can use different values depending on how thick you want the border to be.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Border Width</title>

  <style>
    p {
      border-style: solid;
      border-width: 5px;
    }
  </style>
</head>

<body>

  <p>This paragraph has a thick border.</p>

</body>
</html>

3. Border Color

The border-color property is used to change the color of a border. For example:

p {
  border-style: solid;
  border-color: blue;
}

You can use color names, HEX values, or RGB values.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Border Color</title>

  <style>
    p {
      border-style: solid;
      border-color: blue;
    }
  </style>
</head>

<body>

  <p>This paragraph has a blue border.</p>

</body>
</html>

4. Border Shorthand Property

Instead of writing border width, style, and color separately, you can use the border property. For example:

p {
  border: 2px solid red;
}

This single line includes:

  • 2px → Border width
  • solid → Border style
  • red → Border color

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Border Example</title>

  <style>
    h1 {
      border: 3px solid blue;
    }

    p {
      border: 2px dashed green;
    }
  </style>
</head>

<body>

  <h1>CSS Borders</h1>

  <p>This paragraph has a dashed border.</p>

</body>
</html>

Using the shorthand border property is a simple and commonly used method.

5. Rounded Borders

The border-radius property is used to create rounded corners. For example:

p {
  border: 2px solid blue;
  border-radius: 10px;
}

The larger the value, the more rounded the corners become.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Rounded Borders</title>

  <style>
    p {
      border: 2px solid blue;
      border-radius: 15px;
      padding: 10px;
    }
  </style>
</head>

<body>

  <p>This paragraph has rounded corners.</p>

</body>
</html>

The padding property adds some space inside the border. You will learn more about padding in a later chapter.

Different Borders on Different Sides

You can also add borders to specific sides of an element. For example:

p {
  border-top: 3px solid red;
  border-bottom: 3px solid blue;
}

This adds a red border at the top and a blue border at the bottom.

You can also use:

border-left: 3px solid green;
border-right: 3px solid purple;

This gives you more control when styling individual sides of an element.

Quick Recap

  • A border appears around an HTML element.
  • border-style controls how the border looks.
  • border-width controls the thickness.
  • border-color changes the border color.
  • The border property lets you write width, style, and color in one line.
  • border-radius creates rounded corners.
  • You can add borders to individual sides of an element.

Frequently Asked Questions (FAQs)

Q1. What are CSS borders?

CSS borders are lines that appear around HTML elements. They can be used to separate elements, highlight content, or improve the visual design of a web page.

Q2. What are the main parts of a CSS border?

A CSS border usually has three main parts: border width, border style, and border color.

Q3. What are the different CSS border styles?

Common CSS border styles include solid, dotted, dashed, and double. Each style gives the border a different appearance.

Q4. What is the CSS border shorthand property?

The CSS border property is a shorthand property that allows you to define the border width, style, and color in a single declaration.

Q5. How do I create rounded borders in CSS?

The border-radius property is used to create rounded corners on an HTML element. A larger value creates more rounded corners.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top