Question

I am experiencing issues with the border-radius CSS attribute on IE8. On Safari, Chrome, FF and IE9 this attribute works as expected. However, on IE8 it does not.

I have read some posts and comments about implementing the jQuery Corner plugin, which I have had limited success with. I am unsure whether the issue is with attempting to apply it to a <hr>.

Is there a way to achieve the rounded corner affect in CSS alone, without having to use the jQuery Corner plugin?

My markup:

<span id="title_divider"><hr /></span>

My CSS:

    #title_divider {
        position: absolute;
        width: 49px;
        left: 472px;
        top: 64px;
        padding-top: 10px;
    }
    #title_divider hr {
        height: 10px;
        background-color: #000000;
        border: 1px solid black;
        border-radius: 7px;
        height: 5px;
    }

Answer 1

Use this css3pie.com it fix issues in all low version which don’t support border radius.