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.
Comments
www.hostyasui.com/roundedcorner.php
None of these corners are rounded on Safari skippy.
The technique I'm using is position based, allow for richer borders + fluid layout, and dosen't use hacks.
Scary . . . I am doing something very similar to this (great minds think alike). I am in the process of making transparent images (some with inside transparent and some with outside transparent) to give it more fexibility. I created a javascript class called container (plan to do other stuff with it later) that has an addEvent function (wrapper around attachevent and addeventlistener) that I use to make various divs rounded on page loadup:
container.addEvent(window, 'load',
function(){
container.roundCorners({id:'customerPod',title:'Customer',width:'955px',collapsible:true});
container.roundCorners({id:'accountPod',title:'Account',width:'955px',collapsible:true,,collapsed:true});
});
I have a "titlebar" region that is colored different than the div (like your windows titlebar with round corners). As you can see, I pass un-named objects to my roundCorners method. You give it the id of the div to make rounded, you can set the title of the div (title bar caption), set the width (including percentages), make it collapsable (with + and - images used for collapsed and normal states) and optionally have them collapsed on load (the titlebar is show with rounded corners and the + to "open" the div). It took me 8 divs to make them work correctly with all that in multiple browsers. It is very fast and you can nest divs too.
http://users.cablemo.net/~carl87gt/pods/pod_test.html
a, strong, em, b, i, code, pre, pandbrallowed. Other tags will be shown as code(< will become <). Urls, Line breaks will be auto-formated.