CSS Font Border
The CSS Font Border is a technique used to create a border-like outline around HTML text characters. This technique enhances visibility or adds a decorative effect to the text. It can be achieved using the text-stroke property, which allows customization of text appearance by adding a border around it.
How to Apply Font Border in CSS
There are two methods to apply font borders to text elements in HTML:
Table of Content
- Using text-shadow property
- Using text-stroke property
Let’s study these CSS properties in detail, and understand how are they used to put text borders in HTML.
1. Using text-shadow property
The text-shadow property in CSS adds a shadow effect to text, providing depth and emphasis. It takes parameters for horizontal and vertical offsets, blur radius, and color, allowing designers to create various text-shadow effects for improved visual appeal.
Syntax:
text-shadow: h-shadow v-shadow blur-radius color;
Property Values:
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. |
Return Value:
It returns a font border/shadow around the text.
Font Border Examples
Example 1: This example uses text-shadow property to create shadow to the text.
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-shadow property
</title>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
Example 2: This example uses text-shadow property to create bordered text.
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-shadow property
</title>
<!-- Style to use text-shadow property -->
<style>
.GFG {
color: white;
font-size: 50px;
text-shadow: -1px 1px 0 #000,
1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}
</style>
</head>
<body>
<p class="GFG">w3wiki</p>
</body>
</html>
Output:
2. Using text-stroke property
The text-stroke property is used to add a stroke to the text. This property can change the width and color of the text and is supported by using the -webkit- prefix.
Syntax:
-webkit-text-stroke: width color;
Example
This example uses text-stroke property to create bordered text.
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-stroke property
</title>
<!-- Style to use text-stroke property -->
<style>
.GFG {
color: white;
font-size: 50px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
</style>
</head>
<body>
<p class="GFG">w3wiki</p>
</body>
</html>
Output:
CSS font borders are a versatile and visually appealing way to enhance the readability and aesthetics of your text elements on a webpage. By using properties like text-shadow and text-stroke, you can create various effects that make your text stand out. Understanding and applying these CSS techniques will significantly improve your web design skills and the user experience on your site.
Supported Browser:
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 3.5
- Safari 1
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Contact Us