CSS tutorial

How to styling simple border

/* border: width style color; */
border: medium solid red;
border: 1px solid;
border: 1px red;
border-top: medium solid red;
border-style : solid;
border-top-style : solid;

Property border groups 3 properties: width, style and color.

Possible values of border style:

  • none - displays no borders
  • hidden - displays no border unless a background-image is set
  • dotted - displays a series of rounded dots
  • dashed - displays a series of short square-ended dashes or line segments
  • solid - displays a single, straight, solid line
  • double - displays two straight lines that add up to the pixel size defined by border-width
  • groove - displays a border with a carved appearance (opposite of ridge)
  • ridge - displays a border with an extruded appearance (opposite of groove)
  • inset - displays a border that makes the element appear embedded (opposite of outset)
  • outset - displays a border that makes the element appear embossed (opposite of inset)

Additionally you can use border-image property for replace regular border and border-radius

detailed properties

border-width:  value; 
border-style:  value; 
border-color: value;
border-top:  values; 
border-left:  values; 
border-right: values;
border-bottom: values;
border-top-width:  value; /* same for other sides */ 
border-top-style:  value;  /* same for other sides */ 
border-top-color:  value;  /* same for other sides */