Text border using css (border around text)
Sure. You could use CSS3 text-shadow
:
text-shadow: 0 0 2px #fff;
However it wont show in all browsers right away. Using a script library like Modernizr will help getting it right in most browsers though.
Use multiple text shadows:
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
body {
font-family: sans-serif;
background: #222;
color: darkred;
}
h1 {
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
<h1>test</h1>
Alternatively, you could use -webkit-text-stroke, which produces a slightly different result because it modifies the stroke width instead of adding additional shadows around the text. Despite the webkit
prefix, it works in most browsers (including Firefox) as of 2022:
-webkit-text-stroke: 2px #fff;
body {
font-family: sans-serif;
background: #222;
color: darkred;
}
h1 {
-webkit-text-stroke: 2px #fff;
}
<h1>test</h1>
Also, read more at CSS-Tricks.