PinoyTech.org

CodeIgniter, Kohana, Mootools, jQuery and CSS

How to Create Rounded Corners with Mozilla Firefox and Webkit

Posted by teejay on November 7, 2009

I don't know about you but I see rounded corners all over the web. Mozilla Firefox and browsers using the Webkit engine, have CSS tricks on how to use rounded corners on your website.

input {
 -webkit-border-top-left-radius:2px; 
 -webkit-border-top-right-radius:2px;
 -webkit-border-bottom-left-radius:2px; 
 -webkit-border-bottom-right-radius:2px; 
 -moz-border-radius-topleft:2px;
 -moz-border-radius-topright:2px;
 -moz-border-radius-bottomleft:2px; 
 -moz-border-radius-bottomright:2px; 
}

Or just...

input {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

Unfortunately this doesn't work on any versions of Internet Explorer. Don't you agree that it would be a much better world if we had:

input {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -ie-border-radius: 2px;
}

Categories: How To, Web Development

Tags: css, firefox, webkit

No Comments

Comments are not allowed