How To Create A Box Around Text In HTML (The Easy Way) (2022)

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

Video: How to create box around text in HTML and CSS (Khmer)

TABLE OF CONTENTS

Creating Boxes
The End

DOWNLOAD & NOTES

How To Create A Box Around Text In HTML (The Easy Way) (6)

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

How To Create A Box Around Text In HTML (The Easy Way) (7)

Video: How to Make a Shaded Box Around Text in HTML

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.

How To Create A Box Around Text In HTML (The Easy Way) (8)

  1. 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 background color or use a background-image.
  2. Followed by a layer of padding.
  3. Next, we can set a border.
  4. Finally, margin on 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

Video: HTML Tutorial for Beginners - 12 - Multi-line text box

<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"> &#9432; Information box.</div> <!-- (B2) WARNING --><div class="box warn"> &#9888; Warning icon.</div> <!-- (B3) SUCCESS --><div class="box ok"> &#9432; 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;"> &#9432; Information icon. <br> &#9888; Warning icon. <br> &#10084; Heart icon. <br> &#128161; Bulb icon.</div>

ⓘ Information icon.
⚠ Warning icon.
❤ Heart icon.
💡 Bulb icon.

Video: HTML Tutorial for Beginners - 11 - Add label to text box

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

INFOGRAPHIC CHEAT SHEET

THE END

How To Create A Box Around Text In HTML (The Easy Way) (10)

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!

Video: How to Wrap Text in HTML Tags (in VS Code)

FAQs

How do you put a box around text in CSS?

How do I make a rectangle box in HTML?

Code explanation:
  1. The x attribute defines the left position of the rectangle (e.g. x="50" places the rectangle 50 px from the left margin)
  2. 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?

To create an empty box in html, you just create a <div class=”box”></div> tag in the body element and give it a class attribute of your choice (I named mine box).
...
This should work:
  1. <div>This is a rectangle! </div>
  2. CSS:
  3. div{
  4. width:500px.
  5. height:100px.
  6. border:1px solid black.
  7. background: transparent.
  8. }

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?

“rectangle behind text html” Code Answer
  1. <style>
  2. . rectangle{
  3. padding-top: 40px;
  4. width:100px;
  5. height:100px;
  6. border:1px solid #000;
  7. position: relative;
  8. text-align: center;
Jul 26, 2020

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?

Thanks Dave Rupert for this trick.
  1. 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> ...
  2. 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 {
Jul 25, 2020

How do I display a box in CSS?

The display property specifies the display behavior (the type of rendering box) of an element. In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet.
...
Definition and Usage.
Default value:?
JavaScript syntax:object.style.display="none" Try it
3 more rows

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?

How to Create a Frame
  1. Access Frame Studio.
  2. Under Create a frame for, choose Profile Picture.
  3. Upload your art with a transparent background as separate . ...
  4. Size and adjust your art, click Next.
  5. 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.

Videos

1. Background image with Text Overlay - simple HTML and CSS Project
(Web Coding)
2. Quick Tutorial - How to Add Text Boxes and Labels to HTML - input tag
(Keil Jones)
3. 9: CSS Text Styling Tutorial | Basics of CSS | Learn HTML and CSS | HTML Tutorial
(Dani Krossing)
4. "The Ultimate Box Insert [EASY METHOD] Tutorial With Detailed Instructions"
(SincereStylish)
5. HTML Tutorial - Flowing text around an image
(LinkedIn Learning)

You might also like

Latest Posts

Article information

Author: Lakeisha Bayer VM

Last Updated: 05/04/2022

Views: 6054

Rating: 4.9 / 5 (69 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Lakeisha Bayer VM

Birthday: 1997-10-17

Address: Suite 835 34136 Adrian Mountains, Floydton, UT 81036

Phone: +3571527672278

Job: Manufacturing Agent

Hobby: Skimboarding, Photography, Roller skating, Knife making, Paintball, Embroidery, Gunsmithing

Introduction: My name is Lakeisha Bayer VM, I am a brainy, kind, enchanting, healthy, lovely, clean, witty person who loves writing and wants to share my knowledge and understanding with you.