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


<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


<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


<html>
<head>
    <title>CSS | border-top-style Propertytitle>
    <style>
        h3.a {
            border-top-style: dashed;
        }
    style>
head>
<body>
    <h3 class="a">GeeksforGeeksh3>
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


<html>
<head>
    <title>CSS | border-top-style Propertytitle>
    <style>
        h3.a {
            border-top-style: solid;
        }
    style>
head>
<body>
    <h3 class="a">GeeksforGeeksh3>
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


<html>
<head>
    <title>CSS | border-top-style Propertytitle>
    <style>
        h3.a {
            border-top-style: groove;
        }
    style>
head>
<body>
    <h3 class="a">GeeksforGeeksh3>
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


<html>
<head>
    <title>CSS | border-top-style Propertytitle>
    <style>
        h3.a {
            border-top-style: inset;
        }
    style>
head>
<body>
    <h3 class="a">GeeksforGeeksh3>
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


<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


<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


<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


<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


<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


<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