Aquileo | CSS border-top-width Property

The border-top-width property in CSS is used to specify the width (thickness) of the top border of an element. It controls how thick or thin the top border appears.

It accepts values like thin, medium, thick, or specific units such as px, em, etc.
The border is visible only if a border style is defined (e.g., solid, dashed).
It is commonly used with border-top-style and border-top-color for complete border styling.

Syntax:

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

Default Value: medium

Property Values: The border-top-width property values are listed below:

length: It is used to set the width of the border. It does not take a negative value.
thin: It is used to set the thin border at the top of the element.
medium: It is used to set a medium-sized top border. It is the default value.
thick: It is used to set the thick top border.
initial: It is used to set the border-top-width to its default value.
inherit: This property is inherited from its parent.

Example: Here, we are using the above-explained property.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>
        border-top-width property
    </title>

<!--Driver Code Ends-->

    <style>
        #thin {
            border-color: green;
            border-top-style: solid;
            border-top-width: thin;
        }

        #medium {
            border-color: green;
            border-top-style: solid;
            border-top-width: medium;
        }

        #thick {
            border-color: green;
            border-top-style: solid;
            border-top-width: thick;
        }

        #length {
            border-color: green;
            border-top-style: solid;
            border-top-width: 20px;
        }

        #initial {
            border-color: green;
            border-top-style: solid;
            border-top-width: initial;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body style="text-align:center">

    <h1 style="color:green">GeeksforGeeks</h1>

    <h3>border-top-width property</h3>

    <div id="thin">
        border-top-width: thin;
    </div><br><br>

    <div id="medium">
        border-top-width: medium;
    </div><br><br>

    <div id="thick">
        border-top-width: thick;
    </div><br><br>

    <div id="length">
        border-top-width: length;
    </div><br><br>

    <div id="initial">
        border-top-width: initial;
    </div>
</body>
</html>
<!--Driver Code Ends-->

Output:

CSS border-top-width Property

Explore