Can CSS Add a Border to Text Like the Twitter Logo?

Creating a Font Border in CSS

Question:

Is it possible to add a border to a font using CSS3, akin to the white border around the blue Twitter logo?

Answer:

Yes, there is an experimental CSS property called text-stroke, which is supported by some browsers with a -webkit prefix.

CSS Code:

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}

HTML Code:

<h1>Hello World</h1>

This code will produce a heading with a 2-pixel black border around the yellow text, creating a similar effect to the Twitter logo. However, note that text-stroke is not yet a fully supported property and may not behave consistently across all browsers.

The above is the detailed content of Can CSS Add a Border to Text Like the Twitter Logo?. For more information, please follow other related articles on the PHP Chinese website!