border

The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.

Values

<br-width>
Default value medium is used if absent. See border-width.
<br-style>
Default value none is used if absent. See border-style.
<color>
A <color> denoting the color of the border. If not set, its default value is the value of the element’s color property (the text color, not the background color). See border-color.

Examples

<!DOCTYPE HTML>
<html>
    <head>
        <title>CSS Tutorials</title>
        <style>
            .element1 {
                border: dashed
            }
            
            /* dashed border of medium thickness, the same color as the text */
            .element2 {
                border: dotted 1.5em
            }
            
            /* dotted, 1.5em thick border, the same color as the text */
            .element3 {
                border: solid red
            }
            
            /* solid, red border of medium thickness */
            .element4 {
                border: solid blue 10px
            }
            
            /* solid, blue border of 10px thickness */
            .element5 {
                border: 1px solid black
            }
            
            /* solid, black border of 1px thickness */
        </style>
    </head>
    <body>
        <p class="element1">
            abcdefghijklmnopqrstuvwxyz
        </p>
        <p class="element2">
            abcdefghijklmnopqrstuvwxyz
        </p>
        <p class="element3">
            abcdefghijklmnopqrstuvwxyz
        </p>
        <p class="element4">
            abcdefghijklmnopqrstuvwxyz
        </p>
        <p class="element5">
            abcdefghijklmnopqrstuvwxyz
        </p>
    </body>
</html>