There are lots of tricks to get rounded/curved corners for our CSS websites. For example, you may want rounded corner for a box. You may easily think of using images and aligning it top left, top right, bottom left and bottom right. It sounds easy, but is way too complicated as we’ll need to create large number of blank divisions. Also another minus point can be, it is little bit harder to crop the exact pixel of the corner. Consequently, we’ll have something irregular display of corners and the plain line.
Also we’ve another technique, border-radius, which is supported from CSS3. But CSS3 is not supported in enemy of web developers, i.e. Internet Explorer. However CSS3 is partially supported in other popular browsers like Chrome, Firefox, Safari, etc.
The main problem here became the internet explorer. Even Internet Explorer 8 doesn’t support CSS3 rounded corners. However, it is expected in Internet Explorer 9.
Now, instead of trying images and CSS3, we’ll focus on CSS2 as every of the browsers supports it.
Before creating rounded corners we must technically have pixel to pixel knowledge about rounded corners.
Rounded corners are created from pixels. Imagine a bunch of few lines combining to form a rounded corner. To get clearer, refer to following example:
The above illustration is the illustrated microscopic view of rounded corner in raster image.
Again when the lines come closer together, then it looks like this:
Finally when all of the line combines then it gives a pixilated image of rounded corner.
In normal view, a rounded corner will look like the image below:
We are going to work on the same principle.
Assume that you want rounded corner of about 6 pixel, then you’ll need 7 different lines of 1 pixel height with several width.
As you can see the first line illustrated image above, the height is made constant with few gaps and the width keeps increasing by 1px or few more pixels.
For your easy, again refer to following illustration.
The first line is 93px long, and second line is 2px more than first one. After that the width of the line is kept increasing by 1px till it gives 99px.
Note: For larger radius, you’ll need larger number of lines.
Now we’ll do the CSS trick here which is applicable as CSS2.
We’ll create 6 spans with different classes. We’ll name the class as class1, class2, class3, class 4, class5, class6. And we’ll put each line in each span class. But we are not going to place image, we’ll be instead using background color for each span.
You might question right here, why 6 classes only when we have 7 lines in above image. Well, this is because, the last two lines have similar width and we can set the height to make it as two lines.
Again to define the width of each span, we’ll use margin, where the actual width remains same but the background color will skip the marginal areas. And we’ll again set the height of each span.
OK, now let me show you how this can be accomplished in CSS script.
We will first set default values for all the classes that lies in span.
.class1, .class2, .class3, .class4, .class5, .class6 {
display:block;
overflow:hidden;
}
This will make each span as a block instead of inline content and set the overflow hidden.
We’ll now set the width of each line. But we are not using width CSS code as we actually will have dynamic div wrapping this. So we are doing only pixels work here not a line. Therefore, we’ll use margin.
Here is a code for each class,
.class1 {
Height:1px
Background:#ddd;
Margin:0 6px; /* this will make the first line of the rounded corner 6px smaller than normal maximum line width */
}
.class2 {
Height:1px
Background:#ddd;
Margin:0 4px; /* this will make the second line of the rounded corner 4px smaller than normal maximum line width */
}
.class3 {
Height:1px
Background:#ddd;
Margin:0 3px; /* this will make the third line of the rounded corner 6px smaller than normal maximum line width */
}
.class4 {
Height:1px
Background:#ddd;
Margin:0 2px; /* this will make the fourth line of the rounded corner 2px smaller than normal maximum line width */
}
.class5 {
Height:1px
Background:#ddd;
Margin:0 1px; /* this will make the fifth line of the rounded corner 2px smaller than normal maximum line width */
}
.class6 {
Height:2px /* this will double the line */
Background:#ddd;
Margin:0 0; /* this will make the last line of the rounded exactly the maximum width of the wrapper */
}
Now we’ll be coding for XHTML.
<div class=”outerwrapper”>
<span></span><span class="class2"></span><span></span><span class="class4"></span><span></span><span class="class6"></span>
<div class="content">
Rounded Corner here!!
</div>
<span></span><span class="class5"></span><span></span><span class="class3"></span><span></span><span class="class1"></span>
</div>
The bottom rounded corner must have reversed order of span class. Like we have class1 then class 2 then class 3 then class 4 up to class 6 for the top rounded corner. We’ll need exactly reverse, class6 then class5 … for the bottom rounded corner.
Finalized style sheet:
<style>
.outerwrapper {
Width:960px; /* whatever width you set here, the rounded corner will automatically adjust itself to it.
}
.class1, .class2, .class3, .class4, .class5, .class6 {
display:block;
overflow:hidden;
}
.class1 {
Height:1px
Background:#ddd;
Margin:0 6px; /* this will make the first line of the rounded corner 6px smaller than normal maximum line width */
}
.class2 {
Height:1px
Background:#ddd;
Margin:0 4px; /* this will make the second line of the rounded corner 4px smaller than normal maximum line width */
}
.class3 {
Height:1px
Background:#ddd;
Margin:0 3px; /* this will make the third line of the rounded corner 6px smaller than normal maximum line width */
}
.class4 {
Height:1px
Background:#ddd;
Margin:0 2px; /* this will make the fourth line of the rounded corner 2px smaller than normal maximum line width */
}
.class5 {
Height:1px
Background:#ddd;
Margin:0 1px; /* this will make the fifth line of the rounded corner 2px smaller than normal maximum line width */
}
.class6 {
Height:2px /* this will double the line */
Background:#ddd;
Margin:0 0; /* this will make the last line of the rounded exactly the maximum width of the wrapper */
}
.content {
Padding:5px;
Background:#ddd;
}
</style>
Apply the above code and see the result in every browser. It is supported in every browser, as we have used nothing complicated here.
Hope this was helpful.
