Can CSS Add Borders to Text Like Twitter's Logo?

CSS Font Border: Now a Reality?

In the realm of CSS3, borders have taken a whole new dimension. With the advent of -webkit prefixes, the question arises: can we now add borders to fonts?

The Question:

Can CSS/XHTML be utilized to add a border around text, akin to the white border on Twitter's logo? If not, are there any viable hacks to achieve this effect without resorting to Photoshop?

The Answer:

Indeed, CSS offers an experimental property called text-stroke, empowered by the -webkit prefix in certain browsers.

Code Example:

The following code snippet demonstrates the use of text-stroke:

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

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

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