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

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

From: Alan Gresley <alan@css-class.com>
Date: Fri, 25 Feb 2011 21:11:27 +1100
Message-ID: <4D67804F.8080709@css-class.com>
To: Brad Kemper <brad.kemper@gmail.com>
CC: www-style list <www-style@w3.org>
On 25/02/2011 6:24 PM, Brad Kemper wrote:
> 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);"/>

This varies depending on the width of the border.

> 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;"/>

I can only check in Safari 5. This is unusual. There is a curve on each 
corner that points inwards. I can not use border-radius: 50% 50% and 
actually have it work in Safari 5.


This test case show many varied behavior in all browsers. Three test 
showing border-style, solid, dashed and dotted. The first test with the 
dashed border has IE9 RC showing parts of the border with no 
translucency at all.

Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Friday, 25 February 2011 10:13:01 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:56 UTC