Can CSS Add a Border Directly to Text?

Can CSS Add a Border to Text?

The advent of CSS3 has introduced a plethora of border options. However, the ability to add a border directly to text remains elusive. Despite the absence of a designated property for this purpose, there are ways to achieve a similar effect using existing CSS features or experimental properties.

CSS3 Experimental Property

CSS3 introduced an experimental property called text-stroke, which allows users to apply a border around text. While it's not supported by all browsers (requiring the -webkit prefix in some cases), text-stroke provides a direct solution to adding a border to text.

Code Example:

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

    font-family: sans;
    color: yellow;
}

<h1>Hello World</h1>

Applying text-stroke to a heading, as shown above, creates a solid black border around the text, resulting in a Twitter-style effect.

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