Skip to content


Subversion checkout URL

You can clone with
Download ZIP


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

i0n opened this Issue · 2 comments

2 participants

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

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.


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.


Fixed by rounding border widths to the nearest whole-pixel value.

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.