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): 

Description of values:

Specifies the color of the element's bottom border.
Specifies the style of the element's bottom border.
Specifies the width of the element's bottom border.
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:
        .example {
            border-bottom: 1px solid blue;
    <div class="example">Border-bottom: 1px solid blue</div>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content