CSS border-top property

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

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

The syntax to specify border-top is

</>
Copy
border-top: border-top-width border-top-style border-top-color;

where

PropertyMandatory/
Optional		Examples
border-top-widthOptional1px, 2em
border-top-styleMandatorysolid, dotted, double
border-top-colorOptional#555, red, #55fffcdd

Examples

border-top: 5px solid red;

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

index.html

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

border-top: 5px solid;

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

index.html

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

border-top: solid;

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

index.html

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

div border-top

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

index.html

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

Conclusion

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