CSS border-bottom

CSS border-bottom property

CSS border-bottom property is used to specify bottom side border width, style, and color of a HTML Element.

CSS border-bottom property is a shorthand to specify border-bottom-width, border-bottom-style, and border-bottom-color as a single property.

The syntax to specify border-bottom is

</>

Copy

border-bottom: border-bottom-width border-bottom-style border-bottom-color;

where

Property	Mandatory/ Optional	Examples
border-bottom-width	Optional	1px, 2em
border-bottom-style	Mandatory	solid, dotted, double
border-bottom-color	Optional	#555, red, #55fffcdd

Examples

border-bottom: 5px solid red;

In the following example, we set a border-bottom for <h1> element, with border-bottom-width of 5px, border-bottom-style of solid, and border-bottom-color of red.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-bottom: 5px solid red;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-bottom: 5px solid;

In the following example, we set a border-bottom for <h1> element, with border-bottom-width of 5px, and border-bottom-style of solid. We do not specify any value for border-bottom-color.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-bottom: 5px solid;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-bottom: solid;

In the following example, we set a border-bottom for <h1> element, with border-bottom-style of solid. We do not specify any width and color for the border-bottom.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-bottom: solid;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

div border-bottom

In the following example, we set a border-bottom for <div> element, with border-bottom of 2px solid #00F.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 200px;
            height: 100px;
            background: #CCC;
            border-bottom: 2px solid #00F;
        }
    </style>
</head>
<body>
    <div>Hello World</div>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about border-bottom property, and how to use this property for HTML Elements, with examples.

TutorialKart

CSS border-bottom