Rounded Corners in Webkit

Written by David Walsh on Thursday, December 18, 2008

Much like Mozilla Firefox, Webkit allows developers to create pure CSS rounded corners in all browsers that use the Webkit engine, including Apple’s Safari and Google’s Chrome. Check out how easy implementing rounded corners can be!

View Demo

The CSS

	.sample {
	-webkit-border-radius:10px; /* all corners */
	-webkit-border-top-left-radius:15px; /* top left corner */
	-webkit-border-top-right-radius:50px; /* top right corner */
	-webkit-border-bottom-left-radius:15px; /* bottom left corner */
	-webkit-border-bottom-right-radius:50px; /* bottom right corner */
	border:1px solid #fc0; /* border color, per usual */
}

View Demo

Rounded corners FTW!

Download PDF

Follow via RSS Epic Discussion

December 18 / #

Alex says:

For some reason it doesn’t work properly on my firefox.
When I use both:
-moz-border-radius: {int}px;
-webkit-border-radius: {int}px;
it works nice :)

December 18 / #

Joost says:

And then there is -khtml-border-radius as well.

December 19 / #

Michael Langham says:

i’ll echo that “not working in my firefox”
interesting.

But, alas, worked fine in Safari. Imagine that.

So, LOL, that sample page is coded “but for” webkit engines only.

so, duality of css styles is needed? either way, thanks for this insight David.

December 28 / #

Ash McKenzie says:

-ie-border-radius ? ;) sigh

June 05 / #

Dave says:

It doesn’t matter if you like IE or not. Reality check! As of 2009 IE still commands about 66% of the browser market (source: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers) compared to FF, Safari & Chrome–a total of 34%.

June 12 / #

Stefan Youngs says:

Not true about IE having 66% of the market. In Europe Firefox and Safari together now have more than 50% and their share is rising, especially Safari. Why? People are sick and tired of having to deal with Microsoft’s lame efforts to pretend to be standards compliant. Safari is streets ahead of IE in terms of functionality and safety and is the ONLY browser meeting Acid 3 validation 100% To compare: IE is 29% compliant.

My advice to developers is forget IE. Make the effort to ensure your pages at least render in IE but don’t try to get anything fancy to work. My prediction is IE users will steadily migrate onto Safari and Firefox and in order to arrest this (if they care) Microsoft will bring IE into compliance. The days when we had to wait for Microsoft are well gone and good riddance to them. If the Microsoft guys can make Webkit (Safari) and Gecko (Mozilla) code render properly in their browser, all power to them. If not, hasta la vista.

August 29 / #

epsi says:

Linux user can try it in Epiphany (WebKit).

February 04 / #

Tekk Noir says:

@Stefan Youngs: I’m not totally sure about that, I know there’s a big push in Europe to get rid of IE6 at the moment, but, for example, the British Government have no intention of dropping IE, even after the web attacks detected by Google and 33 other companies, they’re pretty much unphased by it.

Obviously, to people like you and me, we see that and think “Why don’t we just go outside and play in broken glass and used needles? It’s about as safe…”, but they’re politicians, you know, we can’t expect them to grasp such esoteric concepts as basic science.

I suppose though that the reason it’s still so prevalent is that most major established institutions are all running windows server 2000, in which IE can not be upgraded past 6. Phasing out IE6 would entail a complete infrastructure overhaul for most large corporations and government institutions, and their IT departments just don’t have the budget for that.

So, sadly, I think your prediction that IE6 will be phased out soon is unfortunately unlikely, as much as I’d love to see it.

Microsoft officially stop support for IE6 July 4th 2014, so we have plenty of time to dig up a field, bury thousands of copies of IE6 under it, set up a marquis, book musicians, and spread the word about our “Dancing on IE6’s grave” parties…

Can you tell I’m looking forward to it? ;)