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 this 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
  • Teriyaki Chicken & Perfect Sticky Rice
  • Review: Harumi's Japanese Home Cooking
  • Snack Monster: Lotte Kancho & Hello Panda
  • Anatomy of a Christmas Party #3: Gingerbread Cookies
  • Sweet & Spicy Pecans
  • D.I.Y. Idea: Tree Branch Hanging Rod
  • Recipe: Pasta Puttanesca
  • Halloween Week: Costume Ideas That Don't Require a Bikini Wax
  • Comme des Garcons comes to H&M
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 © 2021 · PopBetty · Contact Us · Subscribe · Privacy Policy

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.