New browsers + Border Radius = CSS3

Border radius is one of the nicest and most waited for tag in CSS3. Anyway, I was making the website thinking that I know everything I need to make a nice rounded border for the section, the idea was to make only two corners rounded (right top and left bottom)... but... guess what...? My usual problem... it was easy to do for Firefox:


-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:50px;
-moz-border-radius-bottomleft:50px;
-moz-border-radius-bottomright:0px;


Ok, checked on FF - works!

Now... let's focus on Safari and Chrome. Not more difficult than a code for FF:


-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:50px;
-webkit-border-bottom-left-radius:50px;
-webkit-border-bottom-right-radius:0px;


Right, so checked on Chrome - nice!

Now we arrived to my usual problem - Internet (bloody) Explorer!

Well... at the start I decided to put the filter for IE and done... but then I ran into a very good news - IE9+ is actually supporting a border radius... ok, maybe it was a bit stubid for me to miss it, coz you know, I am kinda one of the IE sceptics so I was trying to make things more complicated then they actually are, so... ready for the solution of border radius for IE9+...???

Here:


border-radius: 0px 50px;


The simplest code ever... so, my bad - IE you rock!!! :)

Now, let's put it all together in one:


section{
border-radius: 0px 50px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:50px;
-moz-border-radius-bottomleft:50px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:50px;
-webkit-border-bottom-left-radius:50px;
-webkit-border-bottom-right-radius:0px;
background-color:red;}


Great, now we have a nice this...

...in all the newest browsers that support CSS3 and HTML5 :)