CSS - border-bottom-width

Quiz

CSS border-bottom-width property sets the width of the bottom border of an element. The border-style or border-bottom-style have to be declared in order to use this property.

Syntax

border-bottom-width: medium | thin | thick | length | initial | inherit;

Property Values

Value	Description
medium	It specifies medium width of bottom border. Default value.
thin	It specifies a thin bottom border.
thick	It specifies a thick bottom border.
length	Thickness can be given in the form of value for bottom border.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Bottom Width Property

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

Medium Border Bottom Width

To set a medium border for the border-bottom-width, we use the medium value. In the following example, medium value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 1px solid;
            border-bottom-width: medium;
        }

        h3 {
            padding: 10px;
            border: 1px dashed;
            border-bottom-width: medium;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>
        This shows border-bottom-width property 
        with medium value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with medium value.
    </p>
</body>

</html>

Thin Border Bottom Width

To set a thin border for the border-bottom-width, we use the thin value. In the following example, thin value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 3px solid;
            border-bottom-width: thin;
        }

        h3 {
            padding: 10px;
            border: 3px dashed;
            border-bottom-width: thin;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>T
        his shows border-bottom-width property 
        with thin value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with thin value.
    </p>
</body>

</html>

Thick Border Bottom Width

To set a thick border for the border-bottom-width, we use the thick value. In the following example, thick value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 1px solid;
            border-bottom-width: thick;
        }

        h3 {
            padding: 10px;
            border: 1px dashed;
            border-bottom-width: thick;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>
        This shows border-bottom-width property 
        with thick value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with thick value.
    </p>
</body>

</html>

Custom Border Bottom Width

To set the thickness of the border for the border-bottom-width, we specify the value of thickness as per our choice. In the following example, a 15px thickness value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 1px solid;
            border-bottom-width: 15px;
        }

        h3 {
            padding: 10px;
            border: 1px dashed;
            border-bottom-width: 15px;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>
        This shows border-bottom-width property 
        with 15px value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with 15px value.
    </p>
</body>

</html>

Supported Browsers

Property
border-bottom-width	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page