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

Closed
androberts opened this Issue Jun 25, 2012 · 0 comments

Comments

Projects
None yet
1 participant

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.

@androberts androberts closed this Jun 25, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment