Border

In this chapter we will learn how to use the border property.

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

We can't use negative length values.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 3px dotted #1c87c9;
      }
      p {
        border: 10px groove #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>This is border example.</h2>
    <div> Example for the border property.</div>
    <p>Some paragraph for example.</p>
  </body>
</html>

Property Values

Value Descriptions
border-width Indicates the width of the border.
border-style Indicates the style of the border.
border-color Indicates the color of the border.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.