CSS bordertopwidth Property (original) (raw)

CSS border-top-width Property

Last Updated : 11 May, 2026

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 `

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

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

`

**Output: