Call (401) 484-8379 or contact us for your next website project → mobileget a free quotefaqabout uscontact us

Yet another round corner CSS technique-the ZoriaMedia way

written & posted by: Ray@zoriamedia
Saturday, March 12, 2011, 16:08

Round corner is a popular technique among web designers. In ZoriaMedia.com, we use the technique in our sidebar. Here is how we do it.

First, create a round corner box in your favorite image editor. We use vector based adobe illustrator. You can also use Ink-scape (free) or photoshop. For boxes, we do not like Photoshop.

And then slice it into three pieces.



Secondly, create the HTML code. Below is ours.

<div class="sidebarbox">
   <h3>TITLE-put title here </h3>
    <div class="sbcontent">
       <p>CONTENT-put contents here</p>
    </div>
</div>

Thirdly, create the CSS that goes with it. Below is a simplified version of our code.

.sidebarbox      {width:230px;background:url(images/bg_sbox_03.png) no-repeat left bottom;}
.sidebarbox h3  { background: url(images/bg_sbox_01.png) no-repeat left top;}
.sidebarbox .sbcontent {background:url(images/bg_sbox_02.png) repeat-y left;}

That is it. You now have round corners. Notice we slide our Sidebox right into the right side. So we only have two corners. You can of course have four round corners if you want.

Now that you have four corners, you can take steps further and beautify the content inside your box.

There are of course many ways to have round corners. We love our technique because:

  1. There is no dirty codes hanging around. Many other techniques involves lots of blank <div></div> blocks that serve as styling purpose only. We do not like that.
  2. Less codes. In our HTML, only sidebarbox->title(h3)+content(sbcontent). In our CSS, only three lines. 
  3. Less images. Only three images with each image less than 1kb.

What is your favorite round corner technique?

Comments

No comments yet.




(optional)

powered by php - powered by sqlite - powered by RiteCMS