CSS Font Border is a technique used to add an outline around text, improving its visibility, readability, and appearance. It helps text stand out against images, colorful backgrounds, or complex layouts, making it more attractive and easier to read.
- Improving readability by separating the text from the background.
- Enhancing design by giving text a bold, stylish look.
- Drawing attention to important text like titles, headings, banners, or call-to-action elements.
- Creating contrast between the text color and the background without changing the actual font color.
Techniques to Create Font Border
While CSS doesn’t have a built-in property for font borders, there are a few techniques that can create the same effect. Below are the most effective methods we can use to outline text in your designs.
1. Using text-shadow
The most widely supported and flexible way to create a font border is by layering multiple text-shadow values. This method works across all major browsers and lets you control the direction, blur, and color of the shadows.
Syntax:
text-shadow: h-shadow v-shadow blur-radius color;- h-shadow: Horizontal shadow (e.g., 2px).
- v-shadow: Vertical shadow (e.g., 2px).
- blur-radius: Shadow softness (e.g., 5px).
- color: Shadow color (e.g., black).
<!--Driver Code Starts-->
<html>
<head>
<meta charset="UTF-8">
<title>CSS Font Border - text-shadow Example</title>
<!--Driver Code Ends-->
<style>
body {
background: linear-gradient(135deg, #2c3e50, #3498db);
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.text-border {
text-align: center;
padding: 150px 20px;
font-size: 72px;
font-weight: 900;
color: #ffffff;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000,
-3px 0px 0 #000,
3px 0px 0 #000,
0px -3px 0 #000,
0px 3px 0 #000;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="text-border">CSS Font Border</div>
</body>
</html>
<!--Driver Code Ends-->
- This HTML code displays bold white text with a thick black border using multiple text-shadow layers.
- It creates an outlined effect on a blue gradient background, making the text stand out clearly and stylishly.
Neon Glow Effect Using text-shadow: The text-shadow property can also be used to create a vibrant neon glow effect, not just borders.
<!--Driver Code Starts-->
<html >
<head>
<!--Driver Code Ends-->
<style>
.neon-text {
font-size: 48px;
color: #fff;
text-shadow:
0 0 5px #0ff,
0 0 10px #0ff,
0 0 20px #0ff,
0 0 40px #0ff,
0 0 80px #0ff;
background-color: #000;
padding: 20px;
text-align: center;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="neon-text">Neon Glow Effect</div>
</body>
</html>
<!--Driver Code Ends-->
- Multiple text-shadow layers are applied to create a vibrant neon glow effect.
- The color property sets the text color to white, contrasting with the black background.
- The background-color property is set to black to enhance the neon effect.
- The padding and text-align properties center the text within the viewport.
Property Values of text-shadow : text-shadow property accepts a lot of values, some of them are mentioned in the table below.
| Property Value | Description |
|---|---|
| h-shadow | Sets the horizontal shadow around the text. |
| v-shadow | Sets the vertical shadow around the text. |
| blur-radius | Sets the blur radius around the text shadow. |
| color | Sets the color of the text shadow. |
| none | Does not set anything around the text (no shadow). |
| initial | Sets the text shadow to its default initial value. |
| inherit | Inherits the property values from its parent element. |
Note: The text-shadow property returns a shadow effect around the text, which can be used to create a simulated font border or outline.
2. Using -webkit-text-stroke
A more precise and powerful method for adding text borders is the -webkit-text-stroke property. This method actually draws an outline around each letter, making it look clean, bold, and sharp.
Syntax:
-webkit-text-stroke: width color;- width: Sets how thick the outline (border) around the text will be (e.g., 2px).
- color: Sets the color of the outline (e.g., black, #000, etc.).
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.stroked-text {
font-size: 48px;
color: white;
-webkit-text-stroke: 2px black;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 class="stroked-text">Stroked Text Example</h1>
</body>
</html>
<!--Driver Code Ends-->
- The -webkit-text-stroke property adds a 2-pixel black outline around the text.
- The color property sets the fill color of the text to white.
3. Using SVG Text for Advanced Effects
SVG is particularly useful when you need your text to remain sharp on all screen sizes and resolutions, making it ideal for logos, banners, or any design element that demands pixel-perfect quality.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
body {
background-color: #2c3e50;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<svg width="700" height="150" xmlns="https://www.w3.org/2000/svg">
<text x="50" y="100" font-size="60" font-family="Arial, sans-serif" font-weight="bold" fill="white"
stroke="black" stroke-width="3" paint-order="stroke fill">
CSS Font Border
</text>
</svg>
</body>
</html>
<!--Driver Code Ends-->
- This SVG code displays bold white text with a black border using stroke and fill.
- The border is 3px thick, and paint-order makes sure the outline appears behind the text for a clean look.
Best Practices for Using CSS Font Borders
- Ensure Readability: Choose outline colors that contrast well with the text and background to maintain readability.
- Use Appropriate Outline Widths: Apply outline widths that enhance text visibility without overwhelming the design.
- Test Across Browsers: Since some text outline properties have limited browser support, verify that your design renders correctly in all target browsers.