Check out example codes for "css border". It will help you in understanding the concepts better.

Code Example 1

.bordersA {
  /* Singe rule. Adds a 1px black solid border */
  border: 1px solid #000000;
}

/* Multi rule for better width control */
.bordersB {
  border-color: #000000;
  border-style: solid;
  /* TOP & BOTTOM: 5px, LEFT & RIGHT: 20px */
  border-width: 5px 20px;
  /* OR - TOP: 5px, RIGHT: 20px, BOTTOM: 10px, LEFT: 15px */
  border-width: 5px 20px 10px 15px;
}

/* Specific rules for even further width, style & color control */
.borderTopWarning {
  /* Replace `top` with `right`, `bottom` or `left` */
  border-top-color: #b52e2e;
  border-top-style: dashed;
  border-top-width: 3px;
}

Code Example 2

h1 {
  border: 5px solid red;
}

Code Example 3

border-style: /*Style Prefered*/;

/*Styles can be:

dotted
dashed
solid
double
groove
ridge
inset
outset
nonce
hidden

*/

Code Example 4

div {
	border-style: dotted;
}

Code Example 5

p.dotted {border-style: dotted;}
p.dashed 
{border-style: dashed;}
p.solid {border-style: solid;}
p.double 
{border-style: double;}
p.groove {border-style: groove;}
p.ridge 
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset 
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

Learn ReactJs, React Native from akashmittal.com