Css Font Border

CSS Font Border?

There's an experimental CSS property called text-stroke, supported on some browsers behind a -webkit prefix.

h1 {    -webkit-text-stroke: 2px black; /* width and color */
    font-family: sans; color: yellow;}

<h1>Hello World</h1>

CSS - Is it possible to add a black outline around each character in text?

You can simulate it with the CSS 2.1 text-shadow property:

p {
    color: #fff;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

This is, of course, not supported in IE9 and below. See: http://www.jsfiddle.net/yijiang/UCjgg/ for a simple demo.

Outline effect to text

There is an experimental webkit property called text-stroke in CSS3, I've been trying to get this to work for some time but have been unsuccessful so far.

What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe).

Use four shadows to simulate a stroked text:

.strokeme {  color: white;  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}

<div class="strokeme">  This text should have a stroke in some browsers</div>

Font outline using only CSS

One way to do that is to use text-shadow and overlap multiple shadows:

.introText {
   text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}

4 times in this case.

Example:

.introText {        font-family: "Nunito", sans-serif;        text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;         color: white;        font-size: 50px;        margin-top: 20vh;      }

    <h1 class="introText text-center">We've got your perfect spot.</h1>

Text border using css (border around text)

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;

Sample Image

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>

CSS Text Border With Padding

What you're asking for is not possible. Especially the requirement of making an outer border of transparency. While box-shadow has an inset property, text-shadow does not. Background clip can create some interesting effects in conjunction with text-shadow but nothing like what you're looking for.

span{font-size: 300px;font-weight:bold;font-family: Arial, 'sans-serif';background-color: #ed5c65;color: transparent;text-shadow: 4px 4px 4px rgba(255,255,255,0.3);-webkit-background-clip: text;-moz-background-clip: text;background-clip: text;}

<span>M</span>

How do I create a border around my text with css

Try this: CSS Font Border?

It uses multiple shadows to make the shadow thicker.

Here's the code again

text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;

Css, Gradient color text and text border

Assuming this is the kind of effect you are looking for: