In 2012, round is in. Circles are “cool”. It’s soft, welcoming, and draws your readers eyes in to your content.

Ready to dive into Photoshop and start making graphics and uploading them to your blog and going in and coding everything to have cute little rounded backgrounds???

No? Me neither. Not when a few lines of code can do it for me, and automatically adjust to fit the content, AND not slow down my sites load time!

You can create rounded corners, drop shadows and use border images (not available in IE).

You can add a rounded box to your post by adding inline CSS directly from the html tab of the post editor using this code:

 

 

You can create rounded backgrounds by adding the following code to your CSS stylesheet:

div {

border-radius: 25px;

border: 2px solid;

-moz-border-radius: 25px;

-webkit-border-radius: 25px;

padding: 5px;

}

 

If you were altering your sidebars then instead of div you would probably see “sidebar”; if you were doing your main wrapper background then it would say “wrapper”.

**A great plugin for Firefox users is the Web Developer Add On. It lets you right-click anywhere on a webpage and “Inspect Element”. You can see exactly what the source code for that page is, and what the “selector” name is for that element.**

The “-moz-” and “-webkit-” properties are required to ensure the border-radius properties shows properly in Firefox, Chrome and Safari.  Opera requires an additional “-o-” property line.

The pixel value determines the “roundness” of the corner. Let’s see what happens if we change it to 15px.

How about if we take it to 45px?

You can get really fancy and make it round on top, but squared on the bottom!

The property “border-radius” can have each corner specified in this order: Top Left, Top Right, Bottom Right, Bottom Left.

The above border is ” border-radius: 25px 25px 0 0; ”

CSS will let you get crazy!

 

div {

       -moz-border-radius: 25px 25px 0 0;

      -webkit-border-radius: 25px 25px 0 0;

      border-radius: 25px 25px 0 0;

      border-top: 2px solid yellow;

      border-right: 3px solid blue;

      border-bottom: 5px dotted red;

     border-left: 3px dashed green;

     padding: 5px;

}

 

How about something a little more professional?

sidebar-title {

border-radius: 15px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

background-color: #ff6699;

padding: 2px;

width: 200px;

text-align: center;

}

 

Next, I’ll show you how to add drop shadows to those boxes using CSS only!

Feel free to find me on twitter or on my personal blog’s Facebook page to ask questions!