Why does Chrome always add a 1px border-radius, even when specific corners are set to 0px?

Question

When you apply a border-radius to an element in Google Chrome, I've noticed that all corners get a subtle 1px rounded corner, even if specific corners are set to 0px.

Consider the following:

.box { float: left; margin: 5px; width: 25px; height: 25px; border: 1px solid #888; }
.box1 { border-radius: 0; }
.box2 { border-radius: 1px; }
.box3 { border-radius: 0 0 5px 5px; }

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

The first two boxes are the controls for this experiment; as we would expect, box #1 has nice sharp corners, and box #2 has subtle 1px rounded corners. So far so good.

The strange thing is that box #3 also has 1px rounded corners on top, in spite of its border-radius value being 0 0 5px 5px. If you look at the computed values in the dev tools, both border-top-left-radius and border-top-right-radius are correctly set to 0px, but they are rendering as if they're set to 1px.

You need an eagle eye to see it, but it's definitely there. Here's a screenshot of the page in Chrome that I magnified using Photoshop to make it easier to see:

Notice that the top corners on box #3 are a softer/whiter gray than the rest of the border. They're identical to the 1px rounded corners of box #2, even though they're set to 0px.

Why is Chrome doing this, and how can I prevent it?

For the record, I'm on Windows 10 and I'm using the latest version of Chrome (v74.0.3729.108). The problem only exists in Chrome, not Firefox or Edge. I'm not sure if this is WebKit problem, or something specific to Chrome/PC.

Probably because only few people have an eagle eye to notice it ;) — Temani Afif
Just log it as a Chrome bug, although, given the severity, I wouldn't hope it gets fixed soon. In effect, it's not exactly a 1px radius. It's the result of a 0px radius with antialiasing. If you compare the resulting colors you'll notice they are slightly different. The bug is that antialiasing should be applied only to corners with a positive border-radius but I'm not sure it's currently possible to apply it selectively. I believe it's either applied (when one of the corners needs it) or not. It's a difficult task (technically) and hardly noticeable => low priority. — tao
Try adding transform: rotateZ(0.001deg), does this change anything? — elveti

Michael Michael · Accepted Answer · 2019-04-26T16:08:58

I came up with one possible solution for pixel perfectionists like myself who are bothered by this Chrome bug:

If you're not already using :before for something else on your element, you can use that to overlay an element with a 1px top border that is the same color as the base element's border, and that will make it appear to render with sharp corners. It's hacky, but it works.

.box { float: left; margin: 5px; width: 25px; height: 25px; border: 1px solid #888; }
.box1 { border-radius: 0; }
.box2 { border-radius: 1px; }
.box3 { border-radius: 0 0 5px 5px; }

.box4 { border-radius: 0 0 5px 5px; position: relative; }
.box4:before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 1px; border-top: 1px solid #888; }

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>

Box #4 now renders with sharp corners on top.

Of course, if your non-rounded corners are not on the same side as each other (e.g. they're kitty-corner), the solution would be messier, but it still might be possible with a combination of :before and :after.

Why does Chrome always add a 1px border-radius, even when specific corners are set to 0px?

1 Answers