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;

enter image description here

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;

enter image description here

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
}

h1 {
  -webkit-text-stroke: 2px #fff;
}
<h1>test</h1>

Also, read more at CSS-Tricks.

Tags:

Css

Text