1/* You have 2 options
2 The first is experimental */
3
4/* text-stroke */
5#example {
6 font-size: 1em;
7 -webkit-text-stroke: 1px #000000;
8}
9
10/* Use 4 shadows
11 Probably best to use this until the above is standardised */
12#example {
13 font-size: 1em;
14 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
15}
1#example3{
2 color: black;
3 font-size: 34px;
4 -webkit-text-stroke: 1px black;
5 -webkit-text-fill-color: white;
6}
1/*
2 * border-style:
3solid: A solid, continuous line.
4none (default): No line is drawn.
5hidden: A line is drawn, but not visible. this can be handy for adding a little extra width to an element without displaying a border.
6dashed: A line that consists of dashes.
7dotted: A line that consists of dots.
8double: Two lines are drawn around the element.
9groove: Adds a bevel based on the color value in a way that makes the element appear pressed into the document.
10ridge: Similar to groove, but reverses the color values in a way that makes the element appear raised.
11inset: Adds a split tone to the line that makes the element appear slightly depressed.
12outset: Similar to inset, but reverses the colors in a way that makes the element appear slightly raised.
13*/
14
15/* Example using the typical solid border-style */
16div {
17 border: 1px solid #4e1f9d;
18}
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5p {outline-color:red;}
6
7p.dotted {outline-style: dotted;}
8p.dashed {outline-style: dashed;}
9p.solid {outline-style: solid;}
10p.double {outline-style: double;}
11p.groove {outline-style: groove;}
12p.ridge {outline-style: ridge;}
13p.inset {outline-style: inset;}
14p.outset {outline-style: outset;}
15</style>
16</head>
17<body>
18
19<h2>The outline-style Property</h2>
20
21<p class="dotted">A dotted outline</p>
22<p class="dashed">A dashed outline</p>
23<p class="solid">A solid outline</p>
24<p class="double">A double outline</p>
25<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
26<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
27<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
28<p class="outset">An outset outline. The effect depends on the outline-color value.</p>
29
30</body>
31</html>
1background: repeating-linear-gradient(to right top, rgb(0, 102, 255), rgb(0, 204, 255));