W3C home > Mailing lists > Public > www-style@w3.org > February 2011

[css3-color] [css3-background] translucent borders in Webkit

From: Brad Kemper <brad.kemper@gmail.com>
Date: Thu, 24 Feb 2011 23:24:50 -0800
Message-Id: <214E1373-711F-4024-A475-59C1950DF933@gmail.com>
To: www-style list <www-style@w3.org>
I've recently noticed that when using rgba borders in webkit, in which the alpha is less than one, that the corners get double amounts of "ink" at the corners, as though each adjoining border edge overlapped the others at the corners. It is very unwanted, always, and the other browsers I checked (Firefox, IE9) don't do that, but I can't find anything in CSS3 Color or Backgrounds & Borders 3 that prohibits it. I think it should.

Here is a test, which in FF4 and IE9 create a even colored border, but in Safari creates a tartan/cross pattern:

<div style="width:50px; height:50px; background:#888;border:50px solid rgba(0,0,0,.7);"/>

Adding a border-radius doesn't help, as I hoped it might, but once the radius gets bigger than the border-width, then the plaid effect goes away and is replaced by a thin "X" pattern. Which you can see with this:

<div style="width:50px; height:50px; background:#888;border:50px solid rgba(0,0,0,.7);border-radius:5px;"/>

In Safari, you can paste those into the snippet editor to get a quick view of the problem. In the other browsers, you can use something like this:

Received on Friday, 25 February 2011 07:25:26 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:43 UTC