CSS - border-bottom Property

Quiz

CSS border-bottom property is a shorthand property that provides an easy way to set the values of properties border-bottom-width, border-bottom-style and border-bottom-color in one single declaration. The property is affected by writing mode.

Syntax

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

Property Values

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

Examples of CSS Border Bottom Property

The following examples explain the border-bottom property with different values.

Setting All Border Bottom Property Values

To set the values of border-block-start-width, border-block-start-style and border-block-start-color in one single declaration, we use the border-block-start property. In the following example, 4px width, dashed style and blue color have been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #caps {
            width: 500px;
            border-bottom: 4px solid red;
        }

        #small {
            width: 500px;
            border-bottom: 4px dashed green;
        }

        #border {
            padding: 10%;
            width: 300px;
            border: 1px solid black;
            border-bottom: 7px double orange;
        }
    </style>
</head>

<body>
    <h2>CSS border-bottom Property</h2>
    <p id="caps">
        THIS SHOWS THE BORDER BOTTOM PROPERTY ON CAPITAL TEXT.
    </p>
    <p id="small">
        this shows the border bottom property on small text.
    </p>
    <p id="border">
        This shows border bottom property on border.
    </p>
</body>

</html>

Components of Border Bottom Property

The border-block-start property is a combination of border-bottom-width, border-bottom-style and border-bottom-color. The following example, shows how these individual properties work together to show the border-block-start effect.

Example

    
<!DOCTYPE html>
<html>

<head>
    <style>
        #caps {
            border-bottom-width: 4px;
            border-bottom-style: solid;
            border-bottom-color: grey;
        }

        #small {
            border-bottom-width: 7px;
            border-bottom-style: double;
            border-bottom-color: #666699;
        }
    </style>
</head>

<body>
    <h2>CSS border-bottom Property</h2>
    <p id="caps">
        THIS SHOWS THE BORDER BOTTOM PROPERTY USING CONSTITUENT PROPERTIES.
    </p>
    <p id="small">
        this shows the border bottom property using constituent properties.
    </p>
</body>

</html>

Supported Browsers

Property
border-bottom	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page