CSS | border-top-style Property

The border-top style property is used to specify the style of the top border.

Syntax:

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

Attribute Value: The default value is none.

Property Values

  1. None: It is the default value and it makes width of the top border to zero. Hence, it is not visible.
    Syntax:

    border-top-style:none;

    Example-1:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    border-top-style:dotted;

    Example-2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    border-top-style:dashed;

    Example-3:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    border-top-style:solid;

    Example-4:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  5. 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    border-top-style:inset;

    Example-6:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    border-top-style:outset;

    Example-7:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    border-top-style:ridge;

    Example-8:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    border-top-style:double;

    Example-9:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    border-top-style:hidden;

    Example-10

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    border-top-style:initial;

    Example:11

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    border-top-style:inherit;

    Example:12

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  13. Note: This property is necessary while using border-top property.

    Supported Browsers: The browser supported by border-top-style Property are listed below:

    • Google Chrome
    • Edge
    • Mozilla Firefox
    • Opera
    • Safari


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.