How to Make a CSS Box Around Text (Border, Padding, Shadow)

Want to put text, an image or a tip inside a neat CSS box? It’s one of the first tricks every beginner learns, and it still makes posts easier to scan: highlight a warning, a quick tip or a code note. Our 2005 version used a span tag with a yellow background. Here’s how to make a CSS box the modern way in 2026, with a border, padding, rounded corners and a shadow, plus copy-and-paste examples.

Quick answer: Wrap your content in a div and give it a border, padding and background, for example <div style="border:1px solid #ccc; padding:16px; background:#fffbe6; border-radius:8px;">Your text</div>. Use a CSS class in your stylesheet if you’ll reuse the box, and use span only for short inline highlights.

A simple CSS box

<div style="border:1px solid #ccc; padding:16px; background:#fffbe6; border-radius:8px;">
Put anything inside this box.
</div>

What each property does

• border: width, style and colour, such as 1px solid #ccc. Styles include solid, dotted, dashed and double.
• padding: space between the text and the border. Too little and the text touches the edge.
• background: the fill colour. Use a light shade so text stays readable.
• border-radius: rounds the corners.
• margin: space outside the box, between it and other content.
• box-shadow: adds depth, such as 0 2px 8px rgba(0,0,0,.1).

Box variations

/* Tip box */
border-left: 5px solid #F28C1E; background: #fff4e6; padding: 12px 16px;

/* Card with shadow */
padding: 16px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.12);

Reuse it with a CSS class

Inline styles are fine for one box. For boxes across your site, add a class to your stylesheet (in WordPress: Appearance > Customize > Additional CSS):

.tip-box {
  border-left: 5px solid #F28C1E;
  background: #fff4e6;
  padding: 12px 16px;
  border-radius: 6px;
  margin: 1em 0;
}

Then use <div class="tip-box">...</div> anywhere. In the WordPress block editor you can also use a Group block with background, border and padding settings, no code needed.

Colours

CSS supports about 140 named colours (such as gold, navy and tomato), plus hex codes like #215387, rgb() and hsl(). The old rule that only 16 named colours work dates from very early browsers. Keep enough contrast between text and background for readability.

span vs div

• div is a block: it takes the full width and starts on a new line. Best for boxes.
• span is inline: it highlights words inside a sentence. A span highlight looks like this.

More CSS: make social media icons with pure CSS or use free Google Fonts.

FAQ

How do I center a CSS box?

Give it a width and margin: 0 auto;, for example max-width: 600px; margin: 0 auto;.

How do I make the box fit the text?

Use display: inline-block; or width: fit-content;.

Why does my padding make the box wider?

Add box-sizing: border-box; so padding and border are included in the width.