Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Border radius blows up when used to style specific corners in conjunction with a border #63

Closed
i0n opened this Issue · 2 comments

2 participants

@i0n
i0n commented

Say I have this style:

.box {
display: inline-block;
border-bottom: 0.417em solid #FDDEA7;
position: relative;
width: 25em;
background-color: #FFFBED;
-moz-border-radius: 0.5em 0.5em 0 0;
-webkit-border-radius: 0.5em 0.5em 0 0;
border-radius: 0.5em 0.5em 0 0;
behavior: url(/js/PIE.htc);
}

What should happen is that the top left and top right corners of the box should be rounded, and a border should be added along the bottom of the box.

If I try and get CSS3PIE to render this the rounded corners are applied, but the border is not rendered. Instead the colour from the border appears in the background of the box, dividing it into alternating diagonal triangles of the desired background colour and the border colour. It looks very odd. Removing the "behaviour" call reverts the box to a normal (but rounded corner-less in IE) state. I'm testing with IE8.

@lojjic
Owner

This appears to be due to the 0.417em length in the border. If I change that to a whole-pixel value it renders properly.

@lojjic
Owner

Fixed by rounding border widths to the nearest whole-pixel value. http://github.com/lojjic/PIE/commit/6da61531397d96db0cc4560fd0ea85932cfd9c2e

Thanks for reporting this issue!

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.