How to Add Border Around Text using CSS ?
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" >w3wiki</ 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 w3wiki </ p > </ body > </ html > |
Output:
Contact Us