CSS Property border








border is a shorthand property that defines the width, color, and style of a border.

Summary

ItemValue
Initial value Initial value from individual properties.
Inherited No.
Version CSS1
JavaScript syntax object.style.border="3px solid blue"
Applies to All elements.




CSS Syntax

border: border-width border-style border-color

Property Values

The property values are listed in the following table.

Value Description
border-width Set the width of the border
border-style Set the style of the border
border-color Set the color of the border
inherit Inherit the border property from the parent element

Browser compatibility

border Yes Yes Yes Yes Yes




Example

An example showing how to use border CSS property.

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            h1 {<!-- w ww.j ava  2  s.co  m-->
                border: thin solid rgb(0, 0, 0);
            }
            p {
                border: thin solid rgb(0, 0, 0);
            }
        </style>
    </head>
    <body>
        <h1>
            This is a heading
        </h1>
        <p>
            This is a paragraph of text.
        </p>
    </body>
</html>

Click to view the demo

Example 2

The following code shows how to add a black thick solid border.

<!DOCTYPE HTML>
<html>
  <head>
    <style type='text/css'>
      div {<!-- ww w .j a va2  s.  c om-->
        border: thick solid black;
      }
    </style>
  </head>
  <body>
    <div>border-width: thick;</div>
  </body>
</html>

Click to view the demo