CSS | Borders

CSS border properties allows us to set the style, color and width of the border.
Note : Different properties can be set for all the different borders i.e.top border, right border, bottom border and left border.
Properties of CSS Borders :

  1. Border Style : The border-style property specifies the type of border. None of the other border properties will work without setting the border style.
    Following are the types of borders:

    *dotted – Defines a dotted border
    *dashed – Defines a dashed border
    *solid – Defines a solid border
    *double – Defines a double border
    *groove – Defines a 3D grooved border.
    *ridge – Defines a 3D ridged border.
    *inset – Defines a 3D inset border.
    *outset – Defines a 3D outset border.
    *none – Defines no border
    *hidden – Defines a hidden border
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.solid {border-style: solid;}
    p.double {border-style: double;}
    </style>
    </head>
    <body>
      
    <h2>The border-style Property</h2>
    <p>Geeksforgeeks</p>
      
    <p class="dotted">A dotted border.</p>
    <p class="dashed">A dashed border.</p>
    <p class="solid">A solid border.</p>
    <p class="double">A double border.</p>
      
    </body>
    </html>

    chevron_right

    
    

    
    OUTPUT:
    
    


  2. Border Width : Border width sets the width of the border . Width of the border can be in px, pt, cm or thin, medium and thick.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
    p
    {
    border-style:solid;
    border-width:8px;
    }
    </style>
    <body>
    <p>
    Geeksforgeeks
    <p>
    Border properties
    </p>
    <\body>

    chevron_right

    
    

    
    OUTPUT:
    
    

  3. Border Color : This property is used to set the color of the border. Color can be set using the color name, hex value or rgb value. If the color is not specified border inherits the color of the element itself.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
    p
    {
    border-style:solid;
    border-color:red
    }
    </style>
    <body>
    <p>
    Geeksforgeeks
    Border properties:color
    </p>
    <\body>

    chevron_right

    
    

    
    OUTPUT:
    
    


  4. Border individual sides : Individual sides can be set with different properties.

    *If border properties has 4 values then:

    border-style : solid dashed dotted double

    Solid : top border
    Dashed : right border
    Dotted : bottom border
    Double : left border

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p
    {
    border-style:solid dashed dotted double;
    border-color:red;
    }
    </style>
    </head>
    <body>
    <p>Geeksforgeeks</p>
    <p>
    Border properties:color
    </p>
    </body>
    </html>

    chevron_right

    
    

    
    OUTPUT:
    
    



    *If border properties has 3 values then:

    border-style: solid dotted double

    Solid:top border
    Dotted: Left and right border
    Double: bottom border

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p
    {
    border-style:solid dashed dotted;
    border-color:blue;
    }
    </style>
    </head>
    <body>
    <p>Geeksforgeeks</p>
    <p>
    Border properties:color
    </p>
    </body>
    </html>

    chevron_right

    
    

    
    OUPUT:
    
    



    *If border properties has 2 values

    border-style:solid dotted

    Solid:top and bottom border
    Dotted: right and left border

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p
    {
    border-style:solid dashed;
    border-color:blue;
    }
    </style>
    </head>
    <body>
    <p>Geeksforgeeks</p>
    <p>
    Border properties:color
    </p>
    </body>
    </html>

    chevron_right

    
    

    
    OUTPUT:
    
    



    *If border properties has 1 value

    border-style:dotted
    Dotted:top, bottom, left and right border

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p
    {
    border-style:solid ;
    border-color:green;
    }
    </style>
    </head>
    <body>
    <p>Geeksforgeeks</p>
    <p>
    Border properties:color
    </p>
    </body>
    </html>

    chevron_right

    
    

    
    OUTPUT:
    
    



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.