You can easily add borders around text in HTML using the CSS border property, The CSS border property which creates a border around an HTML element.
HTML borders help to make your web pages more organized and highlight important sections, making your content easier to understand better.
You can add a border around text in several ways, including using inline CSS, selecting HTML elements in CSS, applying CSS classes, utilizing box-shadow for a shadow-like border, or using pseudo-elements.
To simplify things, we’ll use inline CSS and CSS classes. I’ve outlined both methods in easy, step-by-step instructions. Follow the steps below to add a border around the text.
https://youtube.com/watch?v=1eQQCEMeRfE%3Fautoplay%3D0%26mute%3D0%26controls%3D0%26start%3D7%26origin%3Dhttps%253A%252F%252Fsinglesyntax.com%26playsinline%3D1%26showinfo%3D0%26rel%3D0%26iv_load_policy%3D3%26modestbranding%3D1%26enablejsapi%3D1%26widgetid%3D15
How to Add Border Around Text in HTML (2 Ways)
Using CSS Classes.
In the first method we use CSS class selector to add border around text with example in five simple steps.
Step 1: Add Class to HTML Element
First, add a class to the HTML element.
To create a border, add a class to the HTML element so it can be selected in the CSS stylesheet.
Example:
<p class="text-border">This is some text with a border.</p>In the example above, the <p> element with the class ‘text-border’ and contains some text.
Step 2: Select Class in Stylesheet
After adding a class to your HTML element, select that class in your CSS file. Here is an example:
Example:
<style>
.text-border {}
</style>The example above shows my HTML class `.text-border` in the CSS stylesheet.
Step 3: Apply Border
After selecting the class name inside the CSS file. Now we will add border on this steps.
Apply a CSS border property to your class, setting the width, type (e.g., solid), and color of the border. Here is the example:
Example:
.text-border {
border: 2px solid black;
}In the example above, I added a 2px solid black border.
Step 4: Style Border with CSS
If you are using <p> or <div> like block lever elements than you can make it inline block by using a display-inline-block.
Example:
.text-border {
display: inline-block;
}Otherwise, the border will stretch across the entire width of the element or container.
Once that’s done, you can style your HTML if needed. Such as padding, margin, height, width, and color. etc.
Step 5: Save Files and View Output
After following all the steps, Now you will have a border around your text only.
Now save the files and check the output. I’ll attach the final result below.
Output Example:
This is how you add a border using a CSS class selector.
Using Inline CSS.
Now let us see how to add border using inline CSS with examples in three easy steps.
Step 1: Add style attribute to HTML element
First we need to set a CSS style attribute to our HTML element.
The HTML element you want to add a border select that element and add inside it a Style attribute for example.
Example:
<div style="">This div has a border</div>“In the example above, a <div> HTML element is used with a style="" attribute inside the tag, which is known as inline CSS.
Step 2: Add border property
After adding the style attribute to your HTML element, include the border property with the desired values.
Within the style attribute, simply add the CSS border property with values for border width, style, and color. Here’s an example:
Example:
<div style="border: 7pxdoublergb(0, 0, 0)">This div has a border</div>See the example where I applied a border property with the value 7px double rgb(0,0,0) to create a border around the text.
Step 3: Save the Files and See the Preview
After following the two steps above, save the file and check out the preview.
Output Example:
Output
A 7px double border is used in the example image above. I have also applied padding and set the display to inline-block.
These are two simple and easy ways to add a border: using inline CSS or by applying class selectors.
I hope this post helps you to know how to add borders around text only using CSS in HTML
Related Posts: