Aquileo | CSS border-top-style Property

The border-top-style property in CSS is used to define the appearance of the top border of an element. It determines how the top border is rendered, such as solid, dotted, or dashed.

It supports multiple styles like solid, dashed, dotted, double, etc.
The border is only visible if a style other than none or hidden is applied.
It is commonly used with border-top-width and border-top-color for complete styling.

Syntax:

border-top-style: none | dotted | dashed | solid | groove | inset | 
outset | ridge | double | hidden | initial | inherit;

Default Value: The default value is none.

Property Values

none: Removes the top border completely (default behavior).

border-top-style: none;

Example 1:

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS | border-top-style Property
        </title>
        <style>
            h3.a {
                border-top-style: none;
            }
        </style>
    </head>
    <body>
        <h3 class="a">GeeksforGeeks </h3>
    </body>
</html>

Output:

Dotted: It is used to make the top border with a series of dots.

border-top-style: dotted;

Example 2:

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS | border-top-style Property
        </title>
        <style>
            h3.a {
                border-top-style: dotted;
            }
        </style>
    </head>
    <body>
        <h3 class="a">GeeksforGeeks </h3>
    </body>
</html>

Output:

Dashed: It makes the top border with a series of short line segments.

border-top-style: dashed;

Example 3:

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS | border-top-style Property</title>
    <style>
        h3.a {
            border-top-style: dashed;
        }
    </style>
</head>
<body>
    <h3 class="a">GeeksforGeeks</h3>
</body>
</html>

Output:

Solid: It is used to make the top border with a single solid line segment.

border-top-style: solid;

Example 4:

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS | border-top-style Property</title>
    <style>
        h3.a {
            border-top-style: solid;
        }
    </style>
</head>
<body>
    <h3 class="a">GeeksforGeeks</h3>
</body>
</html>

Output:

Groove: It makes the top border with a grooved line segment, which makes us feel that it is going inside. Syntax:

border-top-style: groove;

Example 5:

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS | border-top-style Property</title>
    <style>
        h3.a {
            border-top-style: groove;
        }
    </style>
</head>
<body>
    <h3 class="a">GeeksforGeeks</h3>
</body>
</html>

Output:

Inset: It makes the top border with an embedded line segment which makes us feel that it is fixed deeply on the screen.

border-top-style: inset;

Example 6:

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS | border-top-style Property</title>
    <style>
        h3.a {
            border-top-style: inset;
        }
    </style>
</head>
<body>
    <h3 class="a">GeeksforGeeks</h3>
</body>
</html>

Output:

Outset: It is the opposite of inset. It makes the top border with a line segment, which appears it to be coming out.

border-top-style: outset;

Example 7:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: outset;
        }
    </style>
</head>

<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>

</html>

Output:

Ridge: It is the opposite of groove. It makes the top border with a ridged line segment, which makes us feel that it is coming out.

border-top-style: ridge;

Example 8:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: ridge;
        }
    </style>
</head>

<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>

</html>

Output:

Double: It makes the top border with a double solid line. The border width, in this case, is equal to the sum of widths of the two-line segments and the space between them.

border-top-style: double;

Example 9:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: double;
        }
    </style>
</head>

<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>

</html>

Output:

Hidden: It is used to make the top border invisible, like none, except in case of border conflict resolution of table elements.

border-top-style: hidden;

Example 10:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: hidden;
        }
    </style>
</head>

<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>

</html>

Output:

Initial: It is used to sets the default value of the element.

border-top-style: initial;

Example 11

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3 {
            border-top-style: initial;
        }
        
    </style>
</head>

<body>
    <h3>GeeksforGeeks </h3>
</body>

</html>

Output:

Inherit: It makes the top-border-style property to be inherited from its parent element.

border-top-style: inherit;

Example 12

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3 {
            border-top-style: inherit;
        }
        
        body {
            border-top-style: dotted;
        }
    </style>
</head>

<body>
    <h3>GeeksforGeeks </h3>
</body>

</html>

Output:

CSS border-top-style Property

Explore