In this tutorial we will show you the solution of HTML border around text only, in some websites, you see that there are border around some texts.
That is a creative way to display text in html. There are many ways with the help of which you are able to apply border around text only.
We here show you to apply border with the help of different tags. So, that you understand that border can be applied to any tag in html from which we able to insert text.
Step By Step Guide On HTML Border Around Text Only :-
As, we already say that there are many ways with the help of which you are able to insert border around text.
Here, below we are going to show an html code in which we apply border around text with the help of different tags. Let us understand them one by one.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p style="border: 2px solid black;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ratione tempora necessitatibus at sequi quos! </p> <br><br> <div style="border: 1px dotted red;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ratione tempora necessitatibus at sequi quos! </div> <br><br> <h3 style="border: 3px solid green; padding: 20px; color: red; background-color: pink;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ratione tempora necessitatibus at sequi quos! </h3> <br><br> <span style="border: 2px dashed orangered; margin: 20px; padding: 20px; background-color: tan;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ratione tempora necessitatibus at sequi quos! </span> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page.
- In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags.
- So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we create four different tags that are paragraph, division, heading and span. And in all of them we write some text and text is same in all tags.
- After this in style attribute of all tags we use border with like 1px solid black. Where 1px is width of border, solid is style of border and black is color of border.
- You can customize them according to your choice. You can see our customization in html code.
- Now, its upto you that how to make it creative, you can change width of border, border style, border color, background color, text color, you can add margins, add padding and then are many things which you can do.
- You can also apply border radius on these. Now, its upon you that how you can make it creative or use it for better understanding and representation.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, here at last in conclusion we can say that with the help of this article we are able to apply border around text only in html. I hope this tutorial on HTML border around text only helps you.
About Ashish
