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

Code Example 1

h1 {
  -webkit-text-stroke: 1px black;
}

Code Example 2

/* You have 2 options
   The first is experimental */

/* text-stroke */
#example {
	font-size: 1em;
	-webkit-text-stroke: 1px #000000;
}

/* Use 4 shadows
   Probably best to use this until the above is standardised */
#example {
	font-size: 1em;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

Code Example 3

h1 {
  text-shadow: 1px 1px #ffffff;
}

Code Example 4

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}

Code Example 5

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}

Code Example 6

/* Written for h4 tag, modify as required */
.black-outline{
    -webkit-text-stroke: 1.11px black; /* stroke width and color */
    color: rgb(255, 255, 255);
    -webkit-font-smoothing: antialiased;
    font-weight: bold;
}

Learn ReactJs, React Native from akashmittal.com