Welcome to a beginner’s tutorial on how to create a box around the text in HTML. New to HTML and want to quickly create your own notification or information box?
An easy way to create a box around text is to simply add padding and border. For example, <p style="padding: 10px; border: 2px solid red;">TEXT</p>
That’s it. But rather than leaving you guys clueless as to what just happened, we will walk through more examples in this guide – Read on!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
QUICK SLIDES
TABLE OF CONTENTS
| Creating Boxes | ||
| The End |
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
CREATING BOXES
All right, let us now get into the details of creating boxes with HTML and CSS.
EXAMPLE 1) BOX BASICS – THE BOX MODEL
HMTL & CSS
1-box.html
<div style="background: ghostwhite; font-size: 20px; padding: 10px; border: 1px solid lightgray; margin: 10px;"> This is some dummy text.</div>This is some dummy text.
THE EXPLANATION
Just what are all those background, font-size, padding, border, margin? Simply put, HTML renders each element based on something called “the box model” – That is something like layers of an onion.
- At the center of the box, we have the content (text, image, or video).
- The text can be controlled with various properties –
font-size, font-weight, font-familiy, text-decoration, color… Which should be pretty self-explanatory. - We can also set the
backgroundcolor or use abackground-image.
- The text can be controlled with various properties –
- Followed by a layer of
padding. - Next, we can set a
border. - Finally,
marginon the outside. This is simply an “empty transparent space” around the box.
Well, the best is to test it hands-on. Go ahead, download the example above, edit each property and see for yourself.
EXAMPLE 2) CSS CLASSES – SOMETHING LIKE TEMPLATES
HMTL & CSS
2-css-class.html
<style>/* (A) SHARED CLASS */.box { margin: 10px; padding: 10px; font-size: 18px;} /* (B) BOX VARIATIONS *//* (B1) INFORMATION BOX */.info { color: brown; background: cornsilk; border: 1px solid burlywood;} /* (B2) WARNING BOX */.warn { color: darkmagenta; background: lightpink; border: 1px solid darkred;} /* (B3) SUCCESS */.ok { color: darkgreen; background: greenyellow; border: 1px solid darkgreen;}</style> <!-- (B1) INFORMATION --><div class="box info"> ⓘ Information box.</div> <!-- (B2) WARNING --><div class="box warn"> ⚠ Warning icon.</div> <!-- (B3) SUCCESS --><div class="box ok"> ⓘ Successful!</div>ⓘ Information box.
⚠ Warning icon.
ⓘ Successful!
THE EXPLANATION
The first example works great, but it is dumb to copy the same style all over the entire website. So now for a crash course on how to create reusable CSS classes.
- First, we create a
<style>tag in the<head>section. - Then define the CSS classes
.CLASS-NAME { STYLES-TO-APPLY }in the<style>tag. - Finally, simply attach the CSS classes to the HTML elements –
<ELEMENT class="CLASS-NAME">.
Yep, it’s that simple, and it should save you a lot of time from copy-pasting the same style property all over the place. This will also make it easier for future updates – Just change the class styles in the <head> section once, and all the rest will follow.
EXTRA) ADDING ICONS
HMTL & CSS
3-icons.html
<div style="background: ghostwhite; font-size: 20px; padding: 10px; border: 1px solid lightgray; margin: 10px;"> ⓘ Information icon. <br> ⚠ Warning icon. <br> ❤ Heart icon. <br> 💡 Bulb icon.</div>ⓘ Information icon.
⚠ Warning icon.
❤ Heart icon.
💡 Bulb icon.
THE EXPLANATION
Just what are those ABCD? Those are called “HTML symbols”, and they are native to HTML. We don’t need to download any images nor use any extra third-party libraries to spice up the boxes. HTML actually has a ton of symbols, and I will leave a link in the extras section below for the complete list of symbols.
EXTRA) ROUNDED CORNERS
HMTL & CSS
4-rounded.html
<div style="border-radius: 10px; background: beige; padding: 10px;"> Rounded</div>Rounded
THE EXPLANATION
Yep, just add border-radius to round the corners. If we define border-radius: 50%, that will literally turn the box into a circle or oval.
LINKS & REFERENCES
- HTML Color Names – HTMLcolorcodes.com
- HTML Symbols – graphmica.com
- CSS Box Model – w3.org
- CSS Class Selectors – MDN
INFOGRAPHIC CHEAT SHEET
THE END
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
FAQs
How do you put a box around text in CSS?
How do I make a rectangle box in HTML?
- The x attribute defines the left position of the rectangle (e.g. x="50" places the rectangle 50 px from the left margin)
- The y attribute defines the top position of the rectangle (e.g. y="20" places the rectangle 20 px from the top margin)
How do I make an empty box in HTML?
...
This should work:
- <div>This is a rectangle! </div>
- CSS:
- div{
- width:500px.
- height:100px.
- border:1px solid black.
- background: transparent.
- }
How do you add a frame border in HTML?
The HTML <frame> frameborder attribute is used to specify whether or not a border should be displayed between the frames. For this, we use two values 0 and 1, where 0 defines no border and 1 defines the border.
What is the border tag in HTML?
The HTML <table> border Attribute is used to specify the border of a table. It sets the border around the table cells. Attribute Values: 1: It sets the border around the table cells.
How do you make a text box in HTML w3schools?
The <input type="text"> defines a single-line text field. The default width of the text field is 20 characters. Tip: Always add the <label> tag for best accessibility practices!
What is Border box in CSS?
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.
How do I put text in a rectangle in HTML?
- <style>
- . rectangle{
- padding-top: 40px;
- width:100px;
- height:100px;
- border:1px solid #000;
- position: relative;
- text-align: center;
How do you draw a square in HTML?
To draw a square, just take a div . Style it with the same value of width and height . To make it visible, set border or background property. That's all.
How do I make a Div Square in HTML?
- Step 1: Add an empty DIV tag. There's only one line of HTML for this project. It's an empty DIV tag. <div></div> ...
- Step 2: Style the DIV so its height is equal to its width. Style the . square to have a width of 100% , a height of 0 and set the top padding to 100% . .square {
How do I display a box in CSS?
...
Definition and Usage.
| Default value: | ? |
|---|---|
| JavaScript syntax: | object.style.display="none" Try it |
How do I display a border like this?
Now, go to Page Layout Menu. Now Select Border and choose any border from the options. Now enter the mentioned details in order to achieve the desired result.
How do you make a frame?
- Access Frame Studio.
- Under Create a frame for, choose Profile Picture.
- Upload your art with a transparent background as separate . ...
- Size and adjust your art, click Next.
- Create a name, choose location availability and schedule, click Next.
What is frame in HTML with example?
HTML <frame> tag define the particular area within an HTML file where another HTML web page can be displayed. A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or frames, and each frame can contain different web pages.