In IE8, border-radius doesn't work on a child element unless parent also has border radius of 1px or more #225

androberts · 2012-06-25T22:40:33Z

In IE8, if I apply a border-radius to an element directly in the <body> of the page, the border-radius takes effect, with no problem, and whatever background-color I specified is visible.

However, If I move this element inside another element, the border-radius doesn't take effect and whatever background I specified becomes transparent.

The workaround is to apply PIE, and a border-radius of 1px or more, to the parent element:

    .parent {

        background: #333;
        padding: 5px;
        border-radius: 1px;
        behavior: url('path/to/pie.htc');
    }

    .child {

        background-color: white;
        width: 50px;
        height: 50px;
        padding: 2px;
        border-radius: 6px;
        behavior: url('path/to/pie.htc');

    }

It would be much appreciated if you could make it such that this extraneous styling is not required on the parent element.

The text was updated successfully, but these errors were encountered:

androberts closed this as completed Jun 25, 2012

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

In IE8, border-radius doesn't work on a child element unless parent also has border radius of 1px or more #225

In IE8, border-radius doesn't work on a child element unless parent also has border radius of 1px or more #225

androberts commented Jun 25, 2012

In IE8, border-radius doesn't work on a child element unless parent also has border radius of 1px or more #225

In IE8, border-radius doesn't work on a child element unless parent also has border radius of 1px or more #225

Comments

androberts commented Jun 25, 2012