Building websites for businesses & individuals since 2008,
- fast, professional & affordable.

Yet another round corner CSS technique-the ZoriaMedia way

Round Corners in CSS/HTML

There are many other ways to create round corners. Please google it and check them out. For our specific need, we like our technique.


Saturday, March 12, 2011, 16:08

Round corner is a popular technique among web designers. In, 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>

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?


No comments yet.


Copyright ©Zoria Media, 2008-2020. All rights reserved.

1006 Charles st, North Providence, RI 02904.

Tel: (401) 484-8379

FAQ | About Us | Contact Us