CSS Borders

The CSS border property is used to specify the border of an element. It also provides a way to set border styles for one or more sides of an element.

Border Properties

The border-color specifies the color of a border surrounding an element.

The possible values can be used for this property are as follows:

Value Description
border-bottom-color It specifies the color of bottom border
border-top-color It specifies the color of top border
border-left-color It specifies the color of left border
border-right-color It specifies the color of right border
border-color It acts as a shorthand for the preceding properties.

Border Basic Syntax

Below example will demonstrate the basic architecture of Text Alignment

Specify the color of bottom border
h1 {
  border-bottom-color: red;
}


Specify the color of top border
h1 {
  border-top-color: red;
}


Specify the color of left border
h1 {
  border-left-color: red;
}


Specify the color of right border
h1 {
  border-right-color: red;
}


Specify the color of all sides of box
h1 {
  border-color: red;
}

Border Example

Below examples will demonstrate the basic architecture of border

Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
        <style type="text/css">
            h1{
                border-top-color: red; 
                border-bottom-color: green; 
                border-right-color: yellow; 
                border-left-color: blue;
            }
        </style>
    </head>
  
    <body>
       <h1>PHPDocs</h1>
    </body>

</html>