Open In App

CSS border-top-style Property

Improve
Improve
Like Article
Like
Save
Share
Report

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;

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




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

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

    border-top-style:dotted;

    Example-2:




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

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

    border-top-style:dashed;

    Example-3:




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

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

    Syntax:

    border-top-style:solid;

    Example-4:




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

  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:




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

  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:




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

  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:




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

  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:




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

  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:




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

  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




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

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

    Syntax:

    border-top-style:initial;

    Example:11




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

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

    Syntax:

    border-top-style:inherit;

    Example:12




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

  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 1
    • Edge 12
    • Mozilla Firefox 1
    • Internet Explorer 5.5
    • Opera 9.2
    • Safari 1


    Last Updated : 02 Jun, 2023
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads