Rounded corners have always been tricky for web developers. If they do not challenge us technically, they load network as you have to download Images to create rounded corners for an element. An example of the rounded corner using an image would be Digimantra’s header (for sometime atleast it will remain).But with the invent of CSS3 and browsers getting more and more powerful rounded corners are also bundled in the new webkits.
WordPress’s Admin Panel is one good example for the rounded corners . But you might have noticed these rounded corners disappear as soon as you open the Admin Panel in internet explorer. Apparently IE denies to support those nifty rounded corners and hence we have to write CSS in such a way so that the UI does breaks completely when page gets rendered on IE. Let me now show you an example of the rounded corner using border-radius property of CSS3.
Should work in Mozilla firefox
Should work in chrome & safari
Yeah it is just few lines of code, and yet it is amazingly beautiful. You can make lot wonderful stuff with these new CSS3 tags. But one think which you to take care is about the IE ‘s compatibility. Here is the code, which will render the above rounded corner div. Just paste this in an html file and open it in Firefox, safari etc and it should work.
<div style=" background-color: #6699CC; -moz-border-radius: 25px; -webkit-border-radius: 25px; border: 1px solid #fff;color:#fff;padding: 10px;width:250px;" > <h2>Hey There !! Digimantra </h2> </div> |
You can change the radius of the rounded corners as per your requirement. So this is how simpler its going to be and just cause we have IE so we have complicated things. Anyways Lets make a better web by actively contributing.
Stay Digified !!
Sachin Khosla
