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...
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
- Top Left Corner
- Top Right Corner
- Bottom Left 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
blog comments powered by Disqus