CSS Font Border
Last Updated :
15 Mar, 2024
The CSS Font Border is a technique used to create a border-like outline around HTML text characters. This technique is used to enhance the visibility or add a decorative effect to the text. This can be achieved using the “text-stroke” property, which allows to customize the appearance of text 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:
Let’s study these CSS properties in detail, and understand how are they used to put text borders in HTML.
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. Â
html
<!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>GeeksforGeeks</h1>
</body>
</html>
Output:Â
Example 2: This example uses text-shadow property to create bordered text. Â
html
<!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">GeeksforGeeks</p>
</body>
</html>
Output:
Using text-stroke property
The Text-Stroke Property is used to add stroke to the text. This property can be used to change the width and color of the text. This property is supported by using the -webkit- prefix.
Syntax:
-webkit-text-stroke: width color;
Example
This example uses text-stroke property to create bordered text. Â
html
<!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">GeeksforGeeks</p>
</body>
</html>
Output:Â
Supported Browser:
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.
Share your thoughts in the comments
Please Login to comment...