CODEWITHSUNDEEP
htmlsafariwebkitcss
LeonS
LeonS

Reputation: 2714

-webkit-border-radius looks ugly

I'm styling a lightbox div with the following properties:

#lightbox {
  border: 0.3em solid #acaeb0;
  -webkit-border-radius: 1em;
  background: #eee -webkit-gradient(linear, 0% 60%, 0% 100%, from(#eee), to(#ccc));
  -webkit-box-shadow: 0 0 0.6em 0.3em #888;
}

Problem is that the resulting rounded corners looks very ugly (using safari5):

enter image description here

Problem is the white space at the rounded corner. Do you know how I can avoid this behavior?

EDIT: After adding the -webkit-background-clip: padding-box; property it looks better but not perfect:

enter image description here

I reduced the width of the border but it looks the same with thick borders. Do I have to set another property to make it perfect looking?

EDIT2: Seems to be a Bug of webkit: https://bugs.webkit.org/show_bug.cgi?id=21819

Upvotes: 4

Views: 8310

Answers (3)

Craig
Craig

Reputation: 2143

I get this problem in Chrome when using a 1px border however using 2px and above looks fine. Chrome: 13.0.782.218 m

Upvotes: 1

Thomas Perissino
Thomas Perissino

Reputation: 21

The only hack which gave me satisfaction on a similar case was to wrap a box within another : one with the background, the second with the border, both with the same border-radius but the first one with a transparent border. And the code comes like this :

.fist-block {background: black; border-radius: 20px; border: 0px solid transparent;}

.second-block {border-radius:20px; border: 1px solid red;}

Upvotes: 2

kapa
kapa

Reputation: 78671

This is called "background bleeding".

For a possible fix, take a look at this site: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed.

As it says, you should try setting:

-webkit-background-clip: padding-box;

Upvotes: 14

Related Questions