Can CSS3 Add a Border to Text?

Enhancing Text with a Font Border

In the realm of web design, CSS3 continues to revolutionize styling capabilities. Amidst the plethora of new border enhancements, one question arises: can we now adorn our fonts with a border? Particularly, the iconic solid white border surrounding the blue Twitter logo has sparked curiosity.

CSS Solution: Text-Stroke

While not yet widely supported, there is indeed an experimental CSS property that holds the key: text-stroke. This property, accessible via the -webkit prefix, allows you to add a stroke to your text.

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

The above CSS will render an

element with a 2-pixel-wide black stroke around the yellow text.

Cross-Browser Compatibility

Currently, text-stroke is only supported in WebKit-based browsers such as Chrome and Safari. For cross-browser compatibility, you can explore alternative techniques, such as:

• CSS Filters: Using a combination of filters like drop-shadow and emboss can create a border effect, but results may vary across browsers.
• SVG Text: By converting your text to an SVG element, you can apply a stroke to it using SVG attributes. However, this approach requires SVG support in the browser.

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