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>
    <title>Title of the document</title>
      div {
        border: 3px dotted #1c87c9;
      p {
        border: 10px groove #8ebf42;
    <h2>This is border example.</h2>
    <div> Example for the border property.</div>
    <p>Some paragraph for example.</p>

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.