CSS border Property

The CSS border property is a shorthand property that sets the values of border-width, border-style and border-color for all four sides of an element. Negative values are not allowed.

The border shorthand property is used when you want to make all four sides the same. You can change borders with the help of border-width, border-style, and border-color properties, which can set different values for each side.

If the value is not defined, the borders are invisible.

Initial Value medium none currentColor
Applies to All elements. It also applies to ::first-letter.
Inherited No.
Animatable Yes. Width, color and style of the border are animatable.
Version CSS1
DOM Syntax object.style.border = "5px solid green";

Syntax

border: border-width border-style border-color | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p {
      border: thick solid #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Border property example</h2>
    <p>This paragraph's border is set to "thick solid green".</p>
  </body>
</html>

See another example where the style of the border is dashed, the width is set to 3px and the color of the border is blue.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      border: 3px dashed #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border property example</h2>
    <p>This paragraph's border is set to "3px dashed blue".</p>
  </body>
</html>

Let’s see another example with theborder-color where 3 values are applied. The first one is applied to the top border, the second one to right and left, and the third one to the bottom.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      border: 3px solid;
      border-color: #1c87c9 #666 #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Border property example</h2>
    <div>Here 3 values are applied to the border-color property.</div>
  </body>
</html>

Another example where also three properties are applied.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p, div {
      padding: 5px;
      }
      .border1 {
      border: 5px solid #ccc;
      }
      .border2 {
      border: 5px dotted #1c87c9;
      }
      div {
      border: thick double #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Border property example</h2>
    <p class="border1">A heading with a solid gray border.</p>
    <p class="border2">A heading with a dotted blue border.</p>
    <div>A div element with a thick double green border.</div>
  </body>
</html>

Values

Value Description
border-width Defines the width of the border. Default value is "medium".
border-style Defines the style of the border. Default value is "none".
border-color Defines the color of the border. Default value is the current color of the element .
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Related Recourses

Border-width, border-style, border-color, border-top, border-bottom, border-left, border-right, border-radius, border-collapse.

Browser support

1.0+ 4.0+ 12.0+ 1.0+ 1.0+ 3.5+



Related articles