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

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.


Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Friday, 25 February 2011 10:13:01 UTC