How to make border wrap around text CSS?
2 answers
by
Ekaterina_90 ,
2 years ago
@gideon.hauck The easiest way to do it is to make the display an inline-block :
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <h1 style="border: 2px red solid; font-size: 50px; display: inline-block"> Title </h1> </body> </html> |
by
aliyah.nikolaus ,
10 months ago
@gideon.hauck
To make a border wrap around text in CSS, you can use the following steps:
- Select the HTML element that you want to add a border to.
- Set the box-sizing property to "border-box". This property makes sure that the border and padding are included in the calculated width and height of the element.
- Set the padding property to a value that gives you enough space between the border and the text.
- Set the border property to a value that suits your design.
- Set the width property to the desired width of the text container.
Example code:
1 2 3 4 5 6 |
.text-border {
box-sizing: border-box;
padding: 10px;
border: 2px solid black;
width: 300px;
}
|
Then, in your HTML code, add the class "text-border" to the element that you want to have the border around the text.
15