css border style options on different sides code example

Example 1: css border style

/* 
 * border-style:
solid: A solid, continuous line.
none (default): No line is drawn.
hidden: A line is drawn, but not visible. this can be handy for adding a little extra width to an element without displaying a border.
dashed: A line that consists of dashes.
dotted: A line that consists of dots.
double: Two lines are drawn around the element.
groove: Adds a bevel based on the color value in a way that makes the element appear pressed into the document.
ridge: Similar to groove, but reverses the color values in a way that makes the element appear raised.
inset: Adds a split tone to the line that makes the element appear slightly depressed.
outset: Similar to inset, but reverses the colors in a way that makes the element appear slightly raised.
*/

/* Example using the typical solid border-style */
div {
	border: 1px solid #4e1f9d;
}

Example 2: border style shorthand

a quick note on border-style shorthand:

  border-style: none none dotted; --> this means: 
  
   One value: it applies the same style to all four sides.
   Two values: applies to top and bottom, the second to the left and right.
   Three values: applies to the top, the second to the left and right, the third to the bottom.
   Four values: applies to all four sides following clockwise.

Example 3: border-style

The border-style property sets the style of an element's four borders.