PopBetty

A Love Letter to Pop Culture

  • About
  • Books
  • Career
  • D.I.Y.
  • Film
  • Food
  • Holiday
  • Contact
You are here: Home / Career / Blogging / Blog Upgrade: How to Make Colored Blocks With Rounded Edges Using CSS3

Blog Upgrade: How to Make Colored Blocks With Rounded Edges Using CSS3

August 8, 2011 by Renee Claire

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:

Text Box 1
Text Box 2

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:
tulle top & patent oxford sandalsIt 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.

Share this:

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to email a link to a friend (Opens in new window)
  • Click to print (Opens in new window)
  • More
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to share on Telegram (Opens in new window)
  • Click to share on WhatsApp (Opens in new window)
  • Click to share on Skype (Opens in new window)

Related

Filed Under: Blogging, Career

PopBetty is the personal site of an Atlanta-based writer who loves books, travel, nonprofits, and all things digital.

It is currently on hiatus.

Logo created by Typematters.

Popular Posts

  • Recipe: Houston's Grilled Chicken Salad Copycat
  • Halloween Week: Costume Ideas That Don't Require a Bikini Wax
  • D.I.Y. Idea & Tutorial: Floral Wedges
  • Teriyaki Chicken & Perfect Sticky Rice
  • Art Pick: Ji Yong-Ho's Recycled Menagerie
  • On-line Vintage Clothing Directory, By Price
  • Halloween Week: Dexter Party Concept
StudioPress Theme of the Month

Disclaimer

PopBetty earns money through banner ads and affiliate links. If you click on an affiliate link and make a purchase, then we may make a commission from that purchase. That said, all posts and recommendations reflect our genuine interests and feelings about products. We do not offer sponsored posts or allow third parties any editorial control over site content.

Copyright © 2022 · PopBetty · Contact Us · Subscribe · Privacy Policy