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

Result

CSS border Property

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>

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>

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>

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.

Browser support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

Which of the following are valid border styles in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?