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.


Agree.


> 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.


<http://css-class.com/test/css/backgrounds/adjoining-borders.htm>


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