#CSS Borders

In CSS, borders are defined using the border property. For example:

border: 1px solid red;      /* Border width: 1px, style: solid, color: red */
border-width: 2px;          /* Border width: 2px */
border-style: dotted;       /* Border style: dotted */
border-color: yellow;       /* Border color: yellow */
border-radius: 5px;         /* Rounded corners with 5px radius */

/* "left" can be replaced with right, top, or bottom for other sides */
border-left: 1px solid red;           /* Left border: 1px solid red */
border-left-width: 1px;               /* Left border width: 1px */
border-left-style: dotted;            /* Left border style: dotted */
border-left-color: yellow;            /* Left border color: yellow */
border-top-left-radius: 5px;          /* Top-left corner radius: 5px */

Example:

CSS Borders

    
        border: 1px solid cyan; 
 
    

    
        border: 1px solid cyan; 

        border-top-left-radius: 10px;

Common border styles include:

Border Style	Description
`dotted`	Dotted line
`dashed`	Dashed line
`solid`	Solid line
`double`	Double lines
`groove`	Border appears sunken
`ridge`	Border appears sunken
`inset`	Content appears sunken
`outset`	Content appears raised

CSS Border Styles

    
        border: 1px dotted cyan;
    
    
    
        border: 1px dashed cyan;
    

    
        border: 1px solid cyan;
    

    
        border: 4px double cyan;
    

    
        border: 8px groove cyan;
    

    
        border: 8px ridge cyan;
    

    
        border: 8px inset cyan;
    

    
        border: 8px outset cyan;