Admittedly, percentages in border-radius are not one of the most common use cases. Some even consider them an edge case, since most people seem to set border-radius in pixels or –rarely– ems. And since it’s not used very frequently, it’s still quite buggy. A bit of a chicken and egg case actually: Is it buggy because it’s used rarely or is it used rarely because it’s buggy? My vote would go to the first, so the purpose of this post is to let people know about why percentages in border-radius are incredibly useful and to highlight the various browser whims when it comes to rendering them.

### Specification

Before we go into discussing implementations, let’s first examine what the right thing to do is, i.e. what the specification says:

Percentages: Refer to corresponding dimension of the border box.

The two length

or percentagevalues of the ‘border-*-radius’ properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge (see the diagram below). The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded.Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box.

### Why is that useful?

It’s the only way of utilizing border-radius to draw a circle or ellipse, i.e. **a rounded shape without any straight lines whatsoever** (without knowing the dimensions in advance).

~~As you will see below, Firefox used to have a bug, or actually a different interpretation of the spec, which I think is a quite commonly needed use case, even more than ellipses: It ~~**always drew a regular curve** for the corners (quarter of a circle) **with the maximum possible radii**. This is a **very commonly needed shape** in UI design. If you’re using OSX, you’re seeing it everywhere: the buttons, the scrollbars, even Skype (notice the blue or grey shading around the usernames in a chat). As I’m writing this post, I can see the same shape in the buttons of WordPress’ admin panel. And as the current spec stands, there’s no way to do that. You have to know the height (or width, if you want a vertical shape) in advance, which even when possible, makes border-radius depend on the value of other attributes (such as line-height) and you have to remember to change it every time you change those, which causes maintenance headaches. And what’s worse is that the Backgrounds & Borders module is almost done, so it’s quite unlikely that this will change anytime soon. 🙁

As noted in this comment by David Baron, that assumption wasn’t exactly correct about Firefox’s old rendering. It just resolved % as relative to width in every case (kinda like percentages in margins) and when the height was smaller than the width, it applied the rules for radii that are too big, which say to reduce it equally. A straightforward deduction is that we do have a standards-compliant way to get the behavior from old versions of Firefox, in every browser: Just specify a very big radius, like 9999px.

### Different implementations, different bugs

As I mentioned above, **Gecko** up to Firefox version 4 beta 6 always draws a regular curve for the corners with the largest radii applicable, resulting in a shape that is either a perfect circle or a rectangle with a semicircle on top and bottom (if height > width) or right and left (if width > height).

In the latest nightlies this bug is fixed, and it follows the spec to the letter. I can’t help but wonder if this was a bug, a misinterpretation of the spec or a deliberate disagreement with it.

**Webkit** was late to support percentages in border-radius, but it seems to be the first (it or IE9, I’m not sure) to follow the spec to the letter –concerning corner radii at least– and renders an ellipse (horizontal radius = width/2, vertical radius = height/2) no matter what. Webkit however seems to be having serious trouble with borders, rendering them with variable width strokes (!).

**Presto** (Opera) is the weirdest when it comes to rendering a percentage border-radius. I can’t figure out the algorithm it uses to determine the radii of the corners even if it was to save my life, it even changes according to window size in my testcases! Since I’ve been using border-radius:50% regularly, I’ve had the pleasure of observing Opera’s rendering in many different designs and I still can’t find a pattern. It’s particularly funny when rendering the little fuchsia comment bubbles in the homepage of my blog: Every one of them has a different radius, even if they are about the same size. It even got one of them right and rendered it as an ellipse once!

**Trident (IE9)**, along with the latest Gecko nightly is the only 100% correct one when it comes to rendering the testcases, which is not surprising since the IE team boasted quite a lot for their bulletproof border-radius implementation. Well, their CSS3 support might be a bit lacking, but at least the bits they actually implement aren’t buggy. Kudos for that.

**Note: **Of course all bugs mentioned above have been reported to the respective browser vendors (except the Gecko one that is already fixed in the nightlies).

Pingback: Fronteers conference 2011 Day 1 – my thoughts « RND Websites()

Pingback: angara fahise()

Pingback: bursa orospu()

Pingback: opulence for life review()

Pingback: lawyerforaccident.net()

Pingback: buy bulk steroids()

Pingback: Live streaming video()

Pingback: Life Insurance Quote()

Pingback: subway surf games()

Pingback: satta matka()

Pingback: Bank Tracker Bot()

Pingback: https://tribot.org()

Pingback: chesterfield sofa()

Pingback: price of clenbuterol()

Pingback: Gadgets()

Pingback: home removals London()

Pingback: invisalign in clearwater fl()

Pingback: convert psd to html()

Pingback: injectable steroids()

Pingback: soffeone.xyz()

Pingback: dragon pharma cut mix()

Pingback: info here()

Pingback: äàëåå()

Pingback: growth factor 1 side effects()

Pingback: bacteriostatic water uk()

Pingback: buy steroids new zealand()

Pingback: child porno cuba steroids()

Pingback: Stephani Mitchel()

Pingback: Greg Thmomson()

Pingback: gmail sign in inbox gmail account()

Pingback: anabol x()

Pingback: buy steroids online with debit card()

Pingback: primobolan prezzo()

Pingback: search all craigslist()

Pingback: frutto del drago()

Pingback: steroids for sale()

Pingback: xmt85c4wx5ctwxw3tcerthve56()

Pingback: alcoholism test()

Pingback: دانلود قسمت هشتم شهرزاد دوم()

Pingback: دانلود شهرزاد قسمت دوازدهم فصل دوم()

Pingback: دانلود شهرزاد قسمت هشتم فصل دوم()

Pingback: دانلود شهرزاد قسمت هفتم فصل دوم()

Pingback: دانلود شهرزاد قسمت نهم فصل دوم()

Pingback: دانلود قسمت 13 عاشقانه()

Pingback: دانلود قسمت 10 شهرزاد دوم()

Pingback: paydaycgtloansnhj.com()

Pingback: دانلود قسمت هفدهم عاشقانه()

Pingback: tubepatrol.net()

Pingback: Monique Alexander()

Pingback: دانلود قسمت 14عاشقانه()

Pingback: Rachel Starr()

Pingback: Peta Jensen()

Pingback: Nicole Aniston()

Pingback: xxx video hd()

Pingback: Nikki Stills()

Pingback: دانلود فصل دوم شهرزاد()

Pingback: hamptonbaycelingfanblog()

Pingback: Dillion Harper()

Pingback: Free Stuff Worldwide()

Pingback: xxx hd video()

Pingback: best casinos online()

Pingback: смотреть онлайн фильмы 2017()

Pingback: پنجره()

Pingback: سریال عاشقانه()

Pingback: دانلود قسمت دوازه عاشقانه()

Pingback: http://zeloporn.com/()

Pingback: http://zeloporn.com()

Pingback: Loyola College for Sale by CollegeDunia()

Pingback: Hundeskove i Danmark()

Pingback: دانلود قسمت پنجم شهرزاد دوم()

Pingback: دانلود قسمت دوازدهم عاشقانه()

Pingback: دانلود قسمت سوم شهرزاد دوم()

Pingback: دانلود قسمت 11 شهرزاد 2()

Pingback: دانلود قسمت اول فصل دوم شهرزاد()

Pingback: cheap jerseys australia()

Pingback: دانلود قسمت سیزده عاشقانه()

Pingback: m2 irons australia()

Pingback: porno()

Pingback: Admission via Good Donation in any medical college()

Pingback: http://similarpornsites.net()

Pingback: http://similarpornsites.net/()

Pingback: videos porno()

Pingback: Coello()

Pingback: porno()

Pingback: porno gratis()

Pingback: porno()

Pingback: porno()

Pingback: videos porno()

Pingback: porno gratis()

Pingback: videos porno()

Pingback: videos porno()

Pingback: porno()

Pingback: porno gratis()

Pingback: porno()

Pingback: porno gratis()

Pingback: videos porno()

Pingback: porno gratis()

Pingback: ساخت پنجره دوجداره()

Pingback: دانلود فیلم سریال عاشقانه()

Pingback: پنجره دوجداره وین تک ویستابست()

Pingback: aquarius man falling in love with virgo woman()

Pingback: دانلود قسمت 17 عاشقانه()

Pingback: auto transport()

Pingback: Acne Facial Treatments Coconut Creek()

Pingback: http://tubetria.mobi/()

Pingback: http://tubetria.mobi()

Pingback: Facial Spa Services Southwest Ranches, Florida()

Pingback: Acne Facial Treatments Plantation()

Pingback: Facial Spa Services Sea Ranch Lakes()

Pingback: http://tubetria.mobi/koakk/()

Pingback: دانلود موزیک()

Pingback: پنجره()

Pingback: groin pain support()

Pingback: فروش توری()

Pingback: دانلود قسمت ششم شهرزاد()

Pingback: casino gamble video poker()

Pingback: دانلود قسمت پنجم شهرزاد()

Pingback: fuck()

Pingback: http://2beeg.mobi/()

Pingback: http://2beeg.mobi()

Pingback: Roof Repair Long Island()

Pingback: best hotel prices()

Pingback: see website()

Pingback: cheap zynga chips()

Pingback: Nintendo 64 games()

Pingback: actual-news.pro()

Pingback: دانلود قسمت هفتم شهرزاد()

Pingback: cr gems hack()

Pingback: jake burgess east berlin ct()

Pingback: پنجره دوجداره()

Pingback: پنجره()

Pingback: Judi Bola()

Pingback: sale LED Recessed lights()

Pingback: http://profi-news.ru()

Pingback: bitcoin trading()

Pingback: coin-banks.com()

Pingback: coin-banks exchange()

Pingback: magazin de pescuit()

Pingback: Porn()

Pingback: coin-banks exchange()

Pingback: DraftKings()

Pingback: coin-banks.com()

Pingback: radia cb()

Pingback: bitcoin hft()

Pingback: suivre le lien()

Pingback: anybunny.mobi()

Pingback: clique aqui()

Pingback: valuable vintage topps baseball cards()

Pingback: vpm()

Pingback: taylormade m2 driver for sale()

Pingback: کول دانلول()

Pingback: anime()

Pingback: دانلود سریال شهرزاد قسمت 15 پانزده()

Pingback: دانلود شهرزاد 13()

Pingback: دانلود شهرزاد قسمت 15()

Pingback: دانلود شهرزاد قسمت 13()

Pingback: clash royale hack()

Pingback: Accounting firms in chicago()

Pingback: Strasbourg travel vlog()

Pingback: vpn()

Pingback: http://www.7321777.com/home.php?mod=space&uid=1024174&do=profile()

Pingback: http://profi-news.ru/()

Pingback: Social Media Marketing()

Pingback: xsc.jlau.edu.cn/Bbs/home.php?mod=space&uid=1782207&do=profile&from=space()

Pingback: TRUSSARDI()

Pingback: police car()

Pingback: free blazing()

Pingback: http://hotmoza.mobi/()

Pingback: http://hotmoza.mobi()

Pingback: kids cartoons before and after()

Pingback: Long Island Roofing()

Pingback: Crib And Changing Table Combo()

Pingback: video for kids()

Pingback: view.ly()

Pingback: Automate Money Making Make Money Online()

Pingback: Letitia()

Pingback: دانلودسریال عالیجناب قسمت دوم()

Pingback: relations()

Pingback: دانلود فیلم()

Pingback: دانلود سریال عالیجناب قسمت اول 1()

Pingback: دانلود قسمت دوم عالیجناب()

Pingback: دانلود سریال عالجناب اول()

Pingback: 食品()

Pingback: Music()

Pingback: Paw Patrol()

Pingback: Best Crib Mattress()

Pingback: link()

Pingback: Carburetor Rebuild()

Pingback: game()

Pingback: toys for kids()

Pingback: قیمت پنجره()

Pingback: ounass()

Pingback: daddy finger()

Pingback: دانلود فیلم()

Pingback: دانلود فیلم()

Pingback: پنجره ضد سرقت ترک()

Pingback: فروش توری()

Pingback: آموزش ساخت پنجره دوجداره()

Pingback: http://onlyindianporn.net/()

Pingback: http://onlyindianporn.net()

Pingback: شرکت تولیدی پنجره دوجداره ایرانی()

Pingback: Rhymes for kIds()

Pingback: Помощь психолога()

Pingback: just for information()

Pingback: callaway xr driver australia()

Pingback: House Cleaning Killeen TX()

Pingback: locolingo social()

Pingback: 5 little monkeys()

Pingback: Catering()

Pingback: Limousine Vancouver BC()