CSS - border Property

Quiz

CSS border is a shorthand property which sets the border style, width and color of the border around an element. If the color is not specified the color of the text will be applied.

Syntax

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

Property Values

Value	Description
border-width	It specifies the width of the border. default value is "medium".
border-style	It specifies the style of the border. default value is "none".
border-color	It specifies the color of the border. default value is the color of the text.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Property

Following examples shows to use all the three properties into a single property. This is the most frequently used property to set border around any element.

Border Around Text Element

Border can be given to text with the choice of the style, width and color. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
        }
    </style>
</head>

<body>
    <h2>CSS border property</h2>
    <p style="border:5px solid red;">
        4px width solid style and red color
    </p>
    <p style="border:5px dotted blue;">
        5px width dotted style and blue color
    </p>
    <p style="border:5px dashed green;">
        5px width dashed style and green color
    </p>
    <p style="border:5px dashed;">
        5px width dashed style and color of the text
    </p>
</body>

</html>

Border Around Image Element

Borders can also be provided to images with the choice of our style, width and color. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
            color: white;
        }

        .img {
            background-image: url(/css/images/pink-flower.jpg);
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <h2>CSS border property</h2>
    <p style="border:5px solid red;" class="img">
        4px width solid style and red color
    </p>
    <p style="border:5px dotted blue;" class="img">
        5px width dotted style and blue color
    </p>
    <p style="border:5px dashed green;" class="img">
        5px width dashed style and green color
    </p>
    <p style="border:5px dashed ;" class="img">
        5px width dashed style and color of the text
    </p>
</body>

</html>

Supported Browsers

Property
border	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page