Wrapper Insertion Rounded Corners

Wrapper Insertion Rounded Corners is a method for creating the Rounded Corners effect for any div with the class name 'rounded-corner'. This method uses JavaScript and four images for the corners. You can use the same four images while using any color you like as the background.

Demo

I am Round!

Lorem ipsum, dolar sit amit... I can't remember the rest. Anyway, did you like my new implementation of rounded corners?

I know may others have done it and I re-inventing the wheel - but nothing passes the time better than re-inventing the wheel. One of my favorite hobbies - re-inventing the wheel. That's why I created the CreateDOM function.

Working

This function works by creating four nested divs inside the div with the class name 'rounded-corner'. These divs will have the class names 'wrapper1','wrapper2','wrapper3' and 'wrapper4'. These divs will be given a corner image as the background. The 'wrapper1' div will have the top left corner, 'wrapper2' will have top right and so on.

The root div - the one with the class 'rounded-corner' can be given any background - if it is given a red background, the box will be red and rounded. If it is green the background will be green. You can also give it an image as the background - it will work the same.

This is done by making the inside part of the corners transparent...

Inside part is transparent while outside is white

One drawback of the system is that you should have a white background for this to work. If you have a non-white background, you will have to edit the images manually to set the background color. What, you don't like that? Then use white background for your website!

Code

JavaScript


//Make the rounded corners, well..., rounded.
function makeRounded() {
    var all = document.getElementsByTagName("*");
    for(var i=all.length-1; ele=all[i],i>0; i--) {
        if(ele.className && ele.className.match(/(\s|^)rounded-corner(\s|$)/i)) {
            var inner = ele.innerHTML;//Or do it using DOM.
            ele.innerHTML = "<div class='wrapper1'><div class='wrapper2'>"
                    + "<div class='wrapper3'><div class='wrapper4'>"
                    + inner    + "</div></div></div></div>";
        }
    }
}
window.onload=makeRounded;

CSS


.rounded-corner .wrapper1 {background:url(corners/top_left.gif) no-repeat top left;}
.rounded-corner .wrapper2 {background:url(corners/top_right.gif) no-repeat top right;}
.rounded-corner .wrapper3 {background:url(corners/bottom_left.gif) no-repeat bottom left;}
.rounded-corner .wrapper4 {
	background:url(corners/bottom_right.gif) no-repeat bottom right;
	padding:0 5px;
}

(X)HTML


<div class="rounded-corner">
 ... Your Text Here ...
</div>

Make sure you have specified a width for the rounded box - else it will be the default 100%

Images

These are the the cornering images used for this page. Feel free to make your own if you want to create this effect for a website with a different background color. I have given this a different color so that you can see the images. Right click the images and chose 'Save' to save the images.
  • Top Left Corner Top Left Corner
  • Top Right Corner Top Right Corner
  • Bottom Left Corner Bottom Left Corner
  • Bottom Right Corner Bottom Right Corner
  • All four Images as a Zipped File

My Requirements...

...for the perfect rounded corner are ...

Clean and Sementic Markup.
I don't want to do any Markup gymnastics like the stuff spiffy corners use. I want clean and decent code - one div with a class.
Just CSS - No JavaScript
Yes I know - I broke this rule. The only alternative was inserting the content inside 4 nested divs - breaking the Clean Markup rule.
Clean DOM
This is yet another rule I broke when I created this script. By 'Clean DOM' I mean that there should be just one div element with a class - not only in the markup but also in the DOM structure. My code will insert 4 nested divs as style hooks. Anyway, I am convinced that creating rounded corners with clean DOM is not possible - at least until CSS Level 3 is considered standard.
Images are good
I have nothing against using images to create the rounded corner effect. In fact, I would advice it - much better effects can be achieved by using images.

The Future

This technique is not destined to live long. CSS 3 have an property called background-size. This can be used to stretch the background image - so you can create rounded corners with just one line of CSS code. So this method will be outdated when CSS 3 will become standard and implemented in all browsers. We can expect this by, say, 2015.

Testing

Colors

Background Color

Image Backgrounds

Click any of the following images to set it as the background.

First Second Third Fourth

blog comments powered by Disqus