CSS border Property

❮ Prev Next ❯

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 of the border property:

<!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>

Try it Yourself »

Result

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 of the border property with the "dashed" value:

<!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>

Try it Yourself »

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

Example of the border property with 3 values:

<!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>

Try it Yourself »

Example of the border-style property:

<!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>

Try it Yourself »

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.