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

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


    My Personal Notes arrow_drop_up


    Article Tags :

    Be the First to upvote.


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