Arrange a Masterclass

A quick note on border radius

Written by on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples

Table of Contents
  1. Addendum

This is a quick post concerning the border-radius CSS3 property, and the syntax behind it. After coming across this site earlier today via Twitter I remembered my initial frustrations with lack of uniformity across user agents and their required syntax in order to create round corners; Firefox requiring a different format to Webkit and the CSS3 spec was pretty annoying.

However, it’s not all that bad. As border-radius.com would have you believe, the syntax to create an element with top-left and bottom-right corners with a 50px round, and top-right and bottom-left corners with 10px rounds would be:

<code>-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 50px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-radius: 50px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;</code>

Wrong, you can actually use the border-radius shorthand to nail this in three lines:

<code>-moz-border-radius:50px 10px 50px 10px;
-webkit-border-radius:50px 10px 50px 10px;
border-radius:50px 10px 50px 10px;</code>

The syntax follows the following rule: border-radius:top-left top-right bottom-right bottom-left;. I’ve tested this in Firefox (-moz-border-radius), Webkit (-webkit-border-radius) and Opera (border-radius) and it works just fine.

Addendum

You’d think Webkit would just be Webkit, right? Wrong. This works in Chrome but not Safari. I’ve had reports that Safari 4.0.4 (I guess it’s not found it, get it? Oh never mind.) doesn’t work. Useful…

Still, this version will work, and is still considerably shorter:

<code>-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius:50px 10px 50px 10px;
border-radius:50px 10px 50px 10px;</code>

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples




By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.


Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

You can now find me on Mastodon.


Suffering? Fix It Fast!

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

Learn:

I help teams achieve class-leading web performance, providing consultancy, guidance, and hands-on expertise.

I specialise in tackling complex, large-scale projects where speed, scalability, and reliability are critical to success.