Rounded Corners Techniques

One more interesting article.
A lot of people are trying to get rid of squares in their web-design and there are a lot of ways to do this:

1. Use images with CSS
2. Use CSS only
3. Use JavaScript
4. RoundedCorners control from AJAX controls library

Let's pass through all of them.

Rounded corners with images and CSS.

Easiest way is to draw an image with rounded corners and set it as an element background. You will always know that this element will have correct background in all browsers.

To do this we need following things:

1. Some images:
       
   
2. This html code:
   <div class="topDiv imageDiv">&nbsp;</div>      
   <div class="middleDiv imageDiv">My text goes here</div>      
   <div class="bottomDiv imageDiv">&nbsp;</div>
   
3. And simple CSS styling:
   .imageDiv
   {
       width:200px;
       float:left;  
       clear:left;
   }
   
   .topDiv
   {
      background-image:url(top.png);
      height:13px;
   }
   
   .middleDiv
   {
      background-image:url("middle.png");
      color:#FFFFFF;
      font-family:verdana;
      font-size:14px;
      padding:20px 0;
      text-align:center;
   }
   
   .bottomDiv
   {
      background-image:url(bottom.png);
      height:17px;
   }

This is an example of working code:

My text goes here

It can be done very fast, but imagine how much time will it take to load images for 5...10... or even more different boxes with rounded corners. More images you have - more time visitor will wait until page loads completely.


To decrease images count we can go to next step:

Rounded corners with CSS (without any images).


There is one way to create rounded corners for Firefox without any additional elements, just add style="-moz-border-radius: 15px;" to target element and it will have pretty border around. Cool, but it works only with FF (see bellow).

Works only if Firefox

So, what to to with other browsers (IE, Google Chrome and etc.)? It's a bit tricky, but nothing is impossible. As everyone knows every picture consist of pixels, so we can create custom elements that will be those missing pixels for rounded corner. 
We need only two things:

1. HTML:
   <div id="Div3" class="example" style="background-color:#FFF;">
   <div class="t5"> </div>
   <div class="t3"> </div>
   <div class="t2"> </div>
   <div class="t1"> </div>
   <div class="t1"> </div>
   <div id="contentElmenent">My content goes here.</div>
   <div class="t1"> </div>
   <div class="t1"> </div>
   <div class="t2"> </div>
   <div class="t3"> </div>
   <div class="t5"> </div>
   </div>
2. Styles:
   
   #Div3 { width:200px; }
   #Div3 #contentElmenent
   {
   text-align:center;
   background-color:#CCCCCC;
   text-align:center;
   padding:30px 0;
   font-size:14px;
   font-family:Verdana;
   height:auto;
   }
   #Div3 div
   {
   background-color:#CCC;
   font-size:1px;
   height:1px;
   }
   #Div3 .t5 {margin:0 5px;}
   #Div3 .t3 {margin:0 3px;}
   #Div3 .t2 {margin:0 2px;}
   #Div3 .t1 {margin:0 1px;}

The result is following:

My content goes here.

 I experimented a bit to get an element with border, but it looks horrible :(

My content goes here.

It's wasn't really easy and now my HTML has a lot of garbage, so I had an idea about moving this functionality to script, to add those fields dynamically... And I found one plugin for JQuery:

Creating Rounder Corners JQuery (Javascript)


This plugin called "JQuery Corner". It's demo page and download link is here. It has possibility to show different styles for element corners and it looks like this:

My content goes here.

Cool, isn't it? 

And all this is done by a single function :) Just need to add following code:

    <script type="text/javascript">
        $(document).ready(
            function () {
                $("#jqueryDiv").corner("round 10px").parent().css('padding', '4px').corner("round 12px")
            });
    </script>
It's amazing but it works almost in all browsers (at least in popular), so I think it's the best solution. So I'm going to use this plugin in my pages. But it the begining :) of this post I promised to write about all methods :), so few words about AJAX.

RoundedCorners control from AJAX controls library


People who uses .NET as development platform can also use ajax controls library. It can be found here. It really has a lot of useful controls (calendar, autocomplete and etc.), but all of this is server side and it can't be used outside form element.
Rounded corners control demo page is here. The idea is same, it creates new <div> element around target control and it makes it look like curve. It also has a lot of options that will help you to quickly customize your container.

So, I think that's all :) Now I have to spend some time implementing all the things that I found, and I hope my site will start working soon.