Hi guys! I’m working on several long-term projects, and recently discovered how to use CSS3 to create colored boxes with rounded edges. It’s a simple, effective way to break up text-heavy posts without additional images. It’s also good for highlighting text or separating sidebar info from the main post.

Here’s what I’m talking about:

Pretty! And it’s easy to do.

Here is the code I used (and here’s a list of web colors):

<div style=”background-color: #[YOUR COLOR]; border-radius: 20px; padding: 15px;  width: [DESIRED WIDTH]px; text-align: center;”>[YOUR TEXT]</div>

You can also use this code with images:
It uses much the same code as before, but within the <img> tag:

<img style=”background-color: #[YOUR COLOR]; border-radius: 20px; padding: 20px; border: 0px;” src=”[IMAGE URL]”>

I like this method of creating boxes with rounded edges for several reasons:

• It’s incredibly customizable: every value (the width, padding, etc.) above can be modified to suit your blog needs. Examples of the possibilities: one, two.
• No JavaScript and no images needed.
• My blogs are hosted by Typepad, and it’s not easy for me to fiddle with my blog template’s code. This script works in my Edit Post field (HTML view), with no other adjustments.
• Google and other search engines can crawl your formatted text, something they couldn’t do if you’d created an image with text.

The only real downside is that CSS3 is not compatible with some older browsers (UPDATE: Or with Google Reader, phooey), meaning some people won’t see the rounded edges (though they should see everything else). Browsers evolve quickly, though, so this should be less and less of problem.