CSS border-top-width Property

Q: How do I apply a thick top border?

To apply a thick top border, you can use: border-top-width: 5px; or use the keyword thick: border-top-width: thick; .

Last Updated : 26 Aug, 2024

The border-top-width property in CSS is used to set a specific width to the top border of an element. The border-top-style or border-style property is used for the element before using the border-top-width property.

Default Value: medium

Syntax:

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

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: In this article, we are using the above-explained property.

HTML

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

    <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>
</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>

Output:

Supported Browsers: The browser supported by border-top-width property are listed below:

Google Chrome 1.0 and above
Edge 12.0 and above
Internet Explorer 4.0 and above
Opera 3.5 and above
Safari 1.0 and above
Firefox 1.0 and above

CSS border-top-width Property – FAQs

What is the border-top-width property in CSS?

The border-top-width property in CSS controls the thickness of the top border of an element. It specifies how thick or thin the top border should appear.

What units can be used with border-top-width?

You can use units like px, em, rem, vw, vh, and keywords like thin, medium, and thick for the border-top-width property.

How do I apply a thick top border?

To apply a thick top border, you can use: border-top-width: 5px; or use the keyword thick: border-top-width: thick; .

Can I set different border widths for each side of an element?

Yes, you can set different widths for each side individually. For example: border-top-width: 3px; border-left-width: 1px; .

Does border-top-width affect the element’s layout?

Yes, the border-top-width can impact the element’s overall height and affect layout, especially when working with padding and margins.

CSS border-style Property

sheyakhare1999

Improve

Article Tags :