Text with border

A simple bordered text using multiple text-shadows

by Arjun Singh

HTML

<body>
  <p>This text is readable on any background.</p>
  <p class="with-eight">This text is using eight text-shadows.</p>
</body>

CSS

body {
  background: purple;
  background-size: 400px 200px;
  background-repeat: no-repeat;
}

p {
  font-size: 20px;
  color: white;
  text-shadow: 0.07em 0 black, 0 0.07em black, -0.07em 0 black, 0 -0.07em black;
}

p.with-eight {
  text-shadow: 0.05em 0 black, 0 0.05em black, -0.05em 0 black, 0 -0.05em black, -0.05em -0.05em black, -0.05em 0.05em black, 0.05em -0.05em black, 0.05em 0.05em black;
}