In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > border-bottom

border-bottom property

Browser support:

Sets the color, style and width properties for the element's bottom border, in a shorthand form.

With this property you can customize the border that appears at the bottom side of HTML elements. You have control over the width, style and color of the border.

border-bottom-style: dotted

border-bottom-style: dashed

border-bottom-style: solid

border-bottom-style: double

border-bottom-style: inset

border-bottom-style: outset

border-bottom-style: groove

border-bottom-style: ridge

border-bottom-style: window-inset

JavaScript page for this property: borderBottom. You can find other example(s) there.

Possible values:

One of the following values:

•

Any of the following values (use the space character to separate them, each value can be used only once):

•	<border-bottom-color>
•	<border-bottom-style>
•	<border-bottom-width>

•

inherit

Description of values:

border-bottom-color

Specifies the color of the element's bottom border.

border-bottom-style

Specifies the style of the element's bottom border.

border-bottom-width

Specifies the width of the element's bottom border.

inherit

Takes the value of this property from the computed style of the parent element.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the border-bottom property:

<head>
    <style>
        .example {
            border-bottom: 1px solid blue;
        }
    </style>
</head>
<body>
    <div class="example">Border-bottom: 1px solid blue</div>
</body>