How to Add Border Around Text using CSS ?
Last Updated :
27 Dec, 2023
This article will show you how to add border around the text using CSS. First, we will create a text element using paragraph, div or using other elements, and then we apply CSS border property on that element to add border around the text.
Syntax:
.gfg {
border = border_width border_style color_name;
}
<div class="gfg">Text Contents...</div>
Example 1: In this example, we will add a border around the text content using CSS.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >
How to Add a Border Around
Text using CSS?
</ title >
< style >
body {
text-align: center;
}
.text-border {
border: 1px solid green;
border-radius: 5px;
padding: 10px 20px;
display: inline-block;
}
</ style >
</ head >
< body >
< p >
Welcome to
< span class = "text-border" >GeeksforGeeks</ span >
</ p >
</ body >
</ html >
|
Output:
Example 2: In this example, we will add a border around the text content using CSS.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >
How to Add a Border Around
Text using CSS?
</ title >
< style >
body {
text-align: center;
}
.text-border {
border: 1px solid green;
border-radius: 5px;
padding: 10px 20px;
display: inline-block;
}
</ style >
</ head >
< body >
< p class = "text-border" >
Welcome to GeeksforGeeks
</ p >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...