Border in CSS: Style, Width, Color, Example

A border in CSS is a line that separates the margin and padding of the block-level element. It sits inside the margin and surrounds the padding and content of the HTML element, as shown in the below figure.

Borders put the line between the margin and padding in the CSS box model. We can apply borders to various HTML elements, such as divs, paragraphs, images, and tables.

Applying a border normally makes the properties of other box model easier to see. Borders enhance the visual appearance of a web page, help separate content, and create a structured layout.

We can define a border at the top, right, bottom, and left sides of a block-level element. A border can vary in the thickness and color. It can also have a style such as solid, dashed, or dotted. CSS provides various border properties that allow us to specify the style, width, and color of a block element’s border.

CSS border

CSS Border Properties


CSS provides several properties to define borders surrounding the padding and content of an HTML element. These properties allow you to control the width, style, and color of the borders, enhancing the visual appearance and structure of the web pages.

  • border-width: Sets the width of the border.
  • border-style: Sets the style of the border.
  • border-color: Sets the color of the border.
  • border: A shorthand property that combines width, style, and color properties in a single declaration.
  • border-top, border-right, border-bottom, border-left: Specific properties to set individual borders for each side of an HTML block element.

Syntax to Define Borders in CSS


In CSS, we can define a border using several properties, either individually or using shorthand property. The general syntax to define a border in CSS is as follows:

selector {
    border-width: width;
    border-style: style;
    border-color: color;
}

In the above syntax, selector is a placeholder for any HTML element you want to apply the border styles to. It could be a tag (e.g., div, p), a class (e.g., .classname), or an ID (e.g., #idname). Let’s take a simple example based on it.

Example 1:

div {
   border-width: 2px;
   border-style: solid;
   border-color: blue;
}

Shorthand Border Property


CSS provides a border shorthand property that allows you to set the width, style, and color in a single line. The general syntax to define a border using shorthand border property is as follows:

selector {
    border: border-width border-style border-color;
}

Example 2:

div {
   border: 2px solid blue;
}

We can also define borders individually for each side of an HTML block-level element using border-top, border-right, border-bottom, and border-left. The general syntax with an example is as follows:

selector {
    border-top: border-width border-style border-color;
    border-right: border-width border-style border-color;
    border-bottom: border-width border-style border-color;
    border-left: border-width border-style border-color;
}

Example 3:

div {
   border-top: 2px solid red;
   border-right: 2px dashed green;
   border-bottom: 2px dotted blue;
   border-left: 2px double black;
}

CSS Border Width


CSS provides a shorthand border-width property to set the width (thickness) of four borders around an HTML block element. We usually set it as a specific size using pixels. However, we can also set it using ems, rems, or by using one of the three pre-defined values: thin, medium, or thick. You cannot set the value of the border-width property as a percentage.
[adinserter block=”5″]
The border-width property can take one, two, three, or four values to specify the width or thickness of the borders on different sides of an HTML block element. The general syntax to define border-width is as:

/* One value - all four sides (top, right, bottom, and left) */
border-width: 10px;

/* Two values - top: 10px, right: 5px, bottom: 10px, left: 5px */
border-width: 10px 5px;

/* Three values - top: 10px, right: 5px, bottom: 15px, left: 5px */
border-width: 10px 5px 15px;

/* Four values - top: 10px, right: 5px, bottom: 15px, left: 20px */
border-width: 10px 5px 15px 20px;

Border Width Values in Terms of Sides

1. One value:

  • The single value defines the border width for all four sides (top, right, bottom, and left).

2. Two values:

  • The first value defines the border width for the top and bottom (vertical).
  • The second value sets the border width for the right and left (horizontal).

3. Three values:

  • The first value sets the border width for the top.
  • The second value sets the border width for the right and left (horizontal).
  • The third value sets the border width for the bottom.

4. Four values:

  • The first value sets the border width for the top.
  • The second value sets the border width for the right.
  • The third value sets the border width for the bottom.
  • The fourth value defines the border width for the left.

Let’s take an example based on the border-width values.

Example 4:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Border Width Example</title>
<style>
.one-value {
    border-width: 10px; /* All sides 10px */
    border-style: solid;
    border-color: black;
    padding: 5px;
    margin-bottom: 10px;
}
.two-values {
    border-width: 10px 5px; /* top and bottom 10px, right and left 5px */
    border-style: solid;
    border-color: black;
    padding: 5px;
    margin-bottom: 10px;
}
.three-values {
    border-width: 10px 5px 15px; /* top 10px, right and left 5px, Bottom 15px */
    border-style: solid;
    border-color: black;
    padding: 5px;
    margin-bottom: 10px;
}
.four-values {
    border-width: 10px 5px 15px 20px; /* top 10px, right 5px, bottom 15px, left 20px */
    border-style: solid;
    border-color: black;
    padding: 5px;
}
</style>
</head>
<body>
    <div class="one-value">Border Width: 10px (all sides)</div>
    <div class="two-values">Border Width: 10px 5px (top & bottom 10px, right & left 5px)</div>
    <div class="three-values">Border Width: 10px 5px 15px (top 10px, right & left 5px, bottom 15px)</div>
    <div class="four-values">Border Width: 10px 5px 15px 20px (top 10px, right 5px, bottom 15px, left 20px)</div>
</body>
</html>

Output:

An example of different CSS border-width.

In this example, we have used the border-width property explicitly. However, we can implicitly use border-width property through the shorthand border property. The shorthand border property in CSS combines border-width, border-style, and border-color into a single line. Look at the below example based on it.
[adinserter block=”2″]

Example 5:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Width Example</title>
<style>
   .pixel-border {
        border: 2px solid blue;
        padding:10px;
        margin:10px;
   }
  .em-border {
        border: 0.5em solid green;
        padding:10px;
        margin:10px;
  }
  .rem-border {
        border: 1rem solid red;
        padding:10px;
        margin:10px;
  }
</style>
</head>
<body>
    <div class="pixel-border">Border Width in Pixels</div>
    <div class="em-border">Border Width in Ems</div>
    <div class="rem-border">Border Width in Rems</div>
</body>
</html>

Output:

border-width property example in px, ems and rems

In this example, we have defined border using a shorthand border property in different units, such as pixels, ems, and rems. The shorthand border property combines border-width, border-style, and border-color into a single declaration. You can adjust the value of the border as you wish. Let’s take an example in which we will use predefined values, like thin, medium, and thick.

Example 6:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Border Width in Predefined Values</title>
<style>
.thin-border {
    border: thin solid black;
    padding:10px;
    margin:10px;
}
.medium-border {
    border: medium solid red;
    padding:10px;
    margin:10px;
}
.thick-border {
    border: thick solid blue;
    padding:10px;
    margin:10px;
}
.custom-border {
    border: 10px solid green;
    padding:10px;
    margin:10px;
}
</style>
</head>
<body>
    <div class="thin-border">Thin Border</div>
    <div class="medium-border">Medium Border</div>
    <div class="thick-border">Thick Border</div>
    <div class="custom-border">Custom Width Border</div>
</body>
</html>

Output:

An example of border-width property using predefined values thin, medium, and thick.

The actual width of the predefined values such as thin, medium, and thick values for the border-width property is not specified in the CSS recommendation in terms of pixels. Therefore, the actual width that corresponds to these predefined values is dependent on the browser.

Individual Border-Width Properties

CSS also provides different border-width properties to individually set the width of the top, bottom, right and left borders for a block element. These properties allow us to precisely control over the appearance of each side of the border. The individual border-width properties provided by CSS are as follows:

  • border-top-width: Sets the width of the top border.
  • border-right-width: Sets the width of the right border.
  • border-bottom-width: Sets the width of the bottom border.
  • border-left-width: Sets the width of the left border.

The general syntax to define individual border-width properties is as:

selector {
    border-top-width: widthValue;
    border-right-width: widthValue;
    border-bottom-width: widthValue;
    border-left-width: widthValue;
}

Here’s an example demonstrating how to set different widths for each side of a border around a box or a block element.

Example 7:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Individual Border Widths</title>
<style>
div {
   border-top-width: 5px;
   border-right-width: 10px;
   border-bottom-width: 15px;
   border-left-width: 20px;
   border-style: solid;
   border-color: black;
   padding: 20px;
}
</style>
</head>
<body>
      <div>Example of Different Border Widths</div>
</body>
</html>

In this example, we have set the top border to 5 pixels, the right border to 10 pixels, the bottom border to 15 pixels, and the left border to 20 pixels. Thus, individual border-width properties allow you to customize the border widths individually for each side of an element, providing greater control over the visual appearance of an HTML element.

CSS Border Style


The border-style property provided by CSS allows us to set the line style of an element’s border for all four sides. It is also a shorthand property like border-width property, which combines the individual border-top-style, border-right-style, border-bottom-style, and border-left-style properties into the single border-style property.

CSS provides various border styles that are as follows:

ValueDescription
noneNo border. (Equivalent of border-width: 0;)
solidBorder is a single solid line.
dottedBorder is a series of dots.
dashedBorder is a series of short lines.
doubleBorder is two solid lines with a space between them.
grooveBorder appears as though it is carved into the page.
ridgeBorder looks as though it is coming out of the page.
insetBorder looks like that the content is embedded in the page.
outsetBorder looks like the content is coming out of the canvas.
hiddenSame as none, but used in terms of border conflict resolution for table elements.

Let’s take an example in which we will see how to set different border styles for a div element.

Example 8:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Border Styles Example</title>
<style>
.solid-border {
    border: 2px solid black;
    padding:5px;
    margin-bottom: 10px;
}
.dashed-border {
    border: 2px dashed red;
    padding:5px;
    margin-bottom: 10px;
}
.dotted-border {
    border: 2px dotted green;
    padding:5px;
    margin-bottom: 10px;
}
.double-border {
    border: 4px double blue;
    padding:5px;
    margin-bottom: 10px;
}
.groove-border {
    border: 4px groove purple;
    padding:5px;
    margin-bottom: 10px;
}
.ridge-border {
    border: 4px ridge orange;
    padding:5px;
    margin-bottom: 10px;
}
.inset-border {
    border: 4px inset gray;
    padding:5px;
    margin-bottom: 10px;
}
.outset-border {
    border: 4px outset pink;
    padding:5px;
}
</style>
</head>
<body>
    <div class="solid-border">Solid Border</div>
    <div class="dashed-border">Dashed Border</div>
    <div class="dotted-border">Dotted Border</div>
    <div class="double-border">Double Border</div>
    <div class="groove-border">Groove Border</div>
    <div class="ridge-border">Ridge Border</div>
    <div class="inset-border">Inset Border</div>
    <div class="outset-border">Outset Border</div>
</body>
</html>

Output:

An example of all border styles in CSS.
Individual Border Styles in CSS

CSS also allows us to individually set the style of the top, right, bottom, and left borders of a block-level element. It offers flexibility to create unique borders by applying different styles to each side of an element’s border. There are the following individual border style properties in CSS that are as follows:

  • border-top-style: Sets the style of the top border.
  • border-right-style: Sets the style of the right border.
  • border-bottom-style: Sets the style of the bottom border.
  • border-left-style: Sets the style of the left border.

The general syntax to set different border styles for each side of an HTML block element is as follows:

selector {
    border-top-style: style;
    border-right-style: style;
    border-bottom-style: style;
    border-left-style: style;
}

Let’s take an example in which we will see how to set different border styles for each side of a div element.

Example 9:

<!DOCTYPE html>
<html>
<head>
     <title>Individual Border Styles Example</title>
<style>
div {
   border-top-style: solid;
   border-right-style: dashed;
   border-bottom-style: dotted;
   border-left-style: double;
   border-width: 5px; /* Set the width for visibility */
   border-color: red; /* Set the color for visibility */
   padding: 20px;
}
</style>
</head>
<body>
    <div>Different Border Styles for a div element.</div>
</body>
</html>

Output:

An example of setting different border-styles for each side of a div element.
In this example, we have set the top border to a solid line, the right border to a dashed line, the bottom border to a dotted line, and the left border to a double line.

Border Color


CSS provides a shorthand border-color property to set the color of the border surrounding a box or an HTML block element. We can use color names, hex codes, RGB, RGBA, HSL, or HSLA values to set the color of the borders. Let’s take an example based on it.

Example 10:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Color Example</title>
<style>
.red-border {
    border: 2px solid red;
    padding:5px;
    margin-bottom: 10px;
}
.green-border {
    border: 2px solid green;
    padding:5px;
    margin-bottom: 10px;
}
.blue-border {
    border: 2px solid blue;
    padding:5px;
    margin-bottom: 10px;
}
.rgba-border {
    border: 2px solid rgba(255, 0, 0, 0.5);
    padding:5px;
}
</style>
</head>
<body>
    <div class="red-border">Red Border Color</div>
    <div class="green-border">Green Border Color</div>
    <div class="blue-border">Blue Border Color</div>
    <div class="rgba-border">RGBA Border Color</div>
</body>
</html>

Output:

CSS border-color example

Individual Border Color Properties in CSS

CSS also provides individual border color properties that allow you to individually set the color of the top, right, bottom, and left borders of a block-level element. The general syntax to individually set the color of the top, right, bottom, and left borders is as follows:

  • border-top-color: Sets the color of the top border.
  • border-right-color: Sets the color of the right border.
  • border-bottom-color: Sets the color of the bottom border.
  • border-left-color: Sets the color of the left border.

The general syntax to individually set the color for each side of the border is as follows:

selector {
   border-top-color: color;
   border-right-color: color;
   border-bottom-color: color;
   border-left-color: color;
}

Here’s an example presenting how to set different border colors for each side of a div element.

Example 11:

<!DOCTYPE html>
<html>
<head>
     <title>Individual Border Colors Example</title>
<style>
.custom-border-color {
     border-top-color: red;
     border-right-color: green;
     border-bottom-color: blue;
     border-left-color: purple;
     border-style: solid; /* Set the border style to make the colors visible */
     border-width: 5px; /* Set the border width to make the colors visible */
     padding: 20px;
}
</style>
</head>
<body>
     <div class="custom-border-color">Setting Different Border Colors for Each Side of a Div Element.</div>
</body>
</html>

Output:

An example of setting individually border color for each side of a div element.
In this example, we have set the top border to red, the right border to green, the bottom border to blue, and the left border to purple using individual border color properties by CSS.

Note: When you do not specify the border-color property, the border-color will be the same color as specified for the color property, i.e., the text color.

Shorthand Border Properties in CSS


CSS offers individual border properties that allow you to individually set the top, right, bottom, and left borders of a block-level element. These properties help to customize the borders on each side of an element independently. A list of individual border properties in CSS is as follows:

  • border-top: Sets the top border of an element.
  • border-right: Sets the right border of an element.
  • border-bottom: Sets the bottom border of an element.
  • border-left: Sets the left border of an element.

These shorthand border properties in CSS combine the border-width, border-style, and border-color properties into a single property for each side of an HTML block element, or all sides of the block element or box.

Let’s take an example in which we will use of border-top, border-right, border-bottom, and border-left properties to style different sides of a div element individually.

Example 12:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Individual Border Properties Example</title>
<style>
.border-top {
     border-top-width: 5px;
     border-top-style: solid;
     border-top-color: red;
     padding: 20px;
     margin-bottom: 10px;
}
.border-right {
     border-right-width: 5px;
     border-right-style: solid;
     border-right-color: green;
     padding: 20px;
     margin-bottom:10px;
}
.border-bottom {
     border-bottom-width: 5px;
     border-bottom-style: solid;
     border-bottom-color: blue;
     padding: 20px;
     margin-bottom:10px;
}
.border-left {
     border-left-width: 5px;
     border-left-style: solid;
     border-left-color: red;
     background-color:gray;
     color:white;
     padding: 20px;
}
</style>
</head>
<body>
    <div class="border-top">Top Border Only</div>
    <div class="border-right">Right Border Only</div>
    <div class="border-bottom">Bottom Border Only</div>
    <div class="border-left">Left Border Only</div>
</body>
</html>

Output:

Examples of individual border properties in CSS

In this example, we have set:

  • the top border is 5 pixels wide, solid, and red.
  • the right border is 10 pixels wide, solid, and green.
  • the bottom border is 5 pixels wide, solid, and blue.
  • the left border is 5 pixels wide, solid, and red.

Best Practices for Using Borders


There are the following key points for CSS borders that you should keep in mind for the best practices. They are as:

  • Always use the consistent border styles throughout your website to maintain a good look.
  • Choose the appropriate border colors that provide enough contrast to be distinguishable for users with visual impairments.
  • Avoid using very thick borders excessively.
  • Use the appropriate size of borders that look good on all screen sizes.
  • When you set borders, always specify the style. If you only set the width and color, the border won’t appear. For example:
border: 2px blue; /* Incorrect */
border: 2px solid blue; /* Correct */

List of CSS Border Properties


Here we have listed all the CSS border properties that you can see at a glance.

  • border: This is a shorthand property to change or set the width, style, and color of all four borders.
  • border-top: This is a shorthand property to change or set the width, style, and color of the top border.
  • border-right: This is a shorthand property to change the width, style, and color of the right border.
  • border-bottom: This is a shorthand property to change the width, style, and color of the bottom border.
  • border-left: This is a shorthand property to change the width, style, and color of the left border.
  • border-width: This property sets the thickness of all four borders.
  • border-top-width: This property sets the thickness of the top border.
  • border-right-width: This property sets the thickness of the right border.
  • border-bottom-width: This property sets the thickness of the bottom border.
  • border-left-width: This property sets the thickness of the left border.
  • border-style: This property specifies the style of all four borders.
  • border-top-style: This property specifies the style of the top border.
  • border-right-style: This property specifies the style of the right border.
  • border-bottom-style: This property sets the style of the bottom border.
  • border-left-style: This property sets the style of the left border.
  • border-color: This property changes the color of all four borders.
  • border-top-color: This property sets or changes the color of the top border.
  • border-right-color: This property sets or changes the color of the right border.
  • border-bottom-color: This property changes the color of the bottom border.
  • border-left-color: This property changes the color of the left border.