CSS Borders

The border-width, border-style, and border-color properties can take 1 to 4 values.

  • 1 value: affects all 4 sides.
  • 2 values: top+bottom and right+left.
  • 3 values: top, right + left, bottom.
  • 4 values: top, right, bottom, left.

border-width

The border-width property can use keyword values or length values.

    

/* thin | medium | thick */
border-width: 1px; /* all 4 sides */
border-width: 1px 1px; /* top + bottom | right + left */
border-width: 1px 1px 1px; /* top | right + left | bottom */
border-width: 1px 1px 1px 1px; /* top | right | bottom | left */


    
    

border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;

border-style

    

/* none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset */
border-style: solid; /* all 4 sides */
border-style: solid solid; /* top + bottom | right + left */
border-style: solid solid solid; /* top | right + left | bottom */
border-style: solid solid solid solid; /* top | right | bottom | left */


    
    

/* none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset */
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

border-color

    

border-color: #000; /* all 4 sides */
border-color: #000 #000; /* top + bottom | right + left */
border-color: #000 #000 #000; /* top | right + left | bottom */
border-color: #000 #000 #000 #000; /* top | right | bottom | left */


    
    

border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;

border

    

border: solid 1px black;
border: solid 1px;
border: solid black;

border-radius

The border-radius properties can take 1-4 values.

  • 1 value: affects all 4 corners.
  • 2 values: top-left + bottom-right and top-right + bottom-left.
  • 3 values: top-left, top-right + bottom-left, bottom-right.
  • 4 values: top-left, top-right, bottom-right, bottom-left.
    

border-radius: 1px; /* all 4 corners */
border-radius: 1px 1px;/*  top-left + bottom-right | top-right + bottom-left */
border-radius: 1px 1px 1px; /* top-left | top-right + bottom-left | bottom-right */
border-radius: 1px 1px 1px 1px; /* top-left | top-right | bottom-right | bottom-left */


    
    

border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;