CSS Border Properties

CSS Border Properties

The CSS border properties allow you to specify the style and color of an element's border.

CSS Border Properties0

Border on All Sides

div {
    border: 1px solid #ccc !important;
    border-color: #000 !important;
    padding: 14px;
}

Red Bottom Border

div.red-border-bottom {
    border-bottom: 1px solid #ccc !important;
    padding: 14px;
    border-color: #f44336 !important;
}

Rounded Border

div.rounded-border {
    border: 1px solid #ccc !important;
    padding: 14px;
    border-radius: 16px !important;
}

Left Blue Border

div.left-blue-border {
    background-color: #ddffff !important;
    padding: 14px;
    border-left: 6px solid #ccc !important;
    border-color: #2196F3 !important;
}

Border Styles

The border-style property specifies what kind of border to display.

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

Values for border-style:

  • none: Default, no border
  • dotted: Defines a dotted border
  • dashed: Defines a dashed border
  • solid: Defines a solid border
  • double: Defines two borders. The width of the two borders is the same as the border-width value
  • groove: Defines a 3D grooved border. The effect depends on the border-color value
  • ridge: Defines a 3D ridged border. The effect depends on the border-color value
  • inset: Defines a 3D inset border. The effect depends on the border-color value
  • outset: Defines a 3D outset border. The effect depends on the border-color value

CSS Border Properties0

Border Width

You can set the width of the border using the border-width property.

There are two ways to set the width of a border: by specifying a length value (e.g., 2px or 0.1em) or using one of the three keywords: thick, medium (default), and thin.

Note: CSS does not define the exact width for the keywords, so different users might set thick, medium, and thin to different values, such as 5px, 3px, and 2px, respectively.

p.one {
    border-style: solid;
    border-width: 5px;
}
p.two {
    border-style: solid;
    border-width: medium;
}

Border Color

The border-color property is used to set the color of the border. Possible values include:

  • name - Specifies the name of a color, like "red"
  • RGB - Specifies an RGB value, like "rgb(255,0,0)"
  • Hex - Specifies a hex value, like "#ff0000"
  • transparent

Note: The border-color property alone will not work. You must also set the border-style property.

p.border-solid-red {
    border-style: solid;
    border-color: red;
}
p.border-solid-green {
    border-style: solid;
    border-color: #98bf21;
}

Individual Border Sides

You can specify different borders for different sides of an element:

p.border-style-example {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

This can also be set with a single property:

border-style: dotted solid;

The border-style property can have 1-4 values:

  • border-style: dotted solid double dashed;
  • border-style: dotted solid double;
  • border-style: dotted solid;
  • border-style: dotted;

Examples:

  • dotted solid double dashed: Top border is dotted, right border is solid, bottom border is double, left border is dashed
  • dotted solid double: Top border is dotted, left and right borders are solid, bottom border is double
  • dotted solid: Top and bottom borders are dotted, right and left borders are solid
  • dotted: All four borders are dotted

Border Shorthand Property

The above examples use many properties to set borders. You can also set all border properties in one declaration:

border: 5px solid red;

You can set the following properties in the border property:

  • border-width
  • border-style (required)
  • border-color

CSS Border Properties

Property Description
border Shorthand property for setting all border properties in one declaration.
border-style Sets the style of the element's borders, or individual sides.
border-width Shorthand property for setting the width of all borders, or individual sides.
border-color Shorthand property for setting the color of all visible borders, or individual sides.
border-bottom Shorthand property for setting all bottom border properties in one declaration.
border-bottom-color Sets the color of the bottom border.
border-bottom-style Sets the style of the bottom border.
border-bottom-width Sets the width of the bottom border.
border-left Shorthand property for setting all left border properties in one declaration.
border-left-color Sets the color of the left border.
border-left-style Sets the style of the left border.
border-left-width Sets the width of the left border.
border-right Shorthand property for setting all right border properties in one declaration.
border-right-color Sets the color of the right border.
border-right-style Sets the style of the right border.
border-right-width Sets the width of the right border.
border-top Shorthand property for setting all top border properties in one declaration.
border-top-color Sets the color of the top border.
border-top-style Sets the style of the top border.
border-top-width Sets the width of the top border.
border-radius Sets the border radius for rounded corners.

More Examples

All Border Properties in One Declaration

This example demonstrates using the shorthand property to set all four borders in one declaration.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS Tutorial</title>
<style>
p {
    border-style: solid;
    border-top: thick double #ff0000;
}
</style>
</head>
<body>
<p>Some text in a paragraph.</p>
</body>
</html>

Setting the Bottom Border Style

This example demonstrates how to set the style of the bottom border.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS Tutorial</title>
<style>
p {border-style: solid;}
p.none {border-bottom-style: none;}
p.dotted {border-bottom-style: dotted;}
p.dashed {border-bottom-style: dashed;}
p.solid {border-bottom-style: solid;}
p.double {border-bottom-style: double;}
p.groove {border-bottom-style: groove;}
p.ridge {border-bottom-style: ridge;}
p.inset {border-bottom-style: inset;}
p.outset {border-bottom-style: outset;}
</style>
</head>
<body>
<p class="none">No bottom border.</p>
<p class="dotted">Dotted bottom border.</p>
<p class="dashed">Dashed bottom border.</p>
<p class="solid">Solid bottom border.</p>
<p class="double">Double bottom border.</p>
<p class="groove">Groove bottom border.</p>
<p class="ridge">Ridge bottom border.</p>
<p class="inset">Inset bottom border.</p>
<p class="outset">Outset bottom border.</p>
</body>
</html>

Setting the Left Border Width

This example demonstrates how to set the width of the left border.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS Tutorial</title>
<style>
p {
    border-style: solid;
    border-left-width: 15px;
}
</style>
</head>
<body>
<p><b>Note:</b> "border-left-width" has no effect if used alone. You must first set the "border-style" property.</p>
</body>
</html>

Setting Colors for All Four Borders

This example demonstrates how to set colors for all four borders. You can set one to four colors.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS Tutorial</title>
<style>
p.border-color-one {
    border-style: solid;
    border-color: #0000ff;
}
p.border-color-two {
    border-style: solid;
    border-color: #ff0000 #0000ff;
}
p.border-color-three {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff;
}
p.border-color-four {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="border-color-one">One-colored border!</p>
<p class="border-color-two">Two-colored border!</p>
<p class="border-color-three">Three-colored border!</p>
<p class="border-color-four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work alone. You must first set the "border-style" property.</p>
</body>
</html>

Setting the Right Border Color

This example demonstrates how to set the color of the right border.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS Tutorial</title>
<style>
p {
    border-style: solid;
    border-right-color: #ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>