Home/ Questions/Q 7977607
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T09:15:03+00:00

I have a conflicts in css3 border radius between browsers. #menu ul li:first-child {

  • 0

I have a conflicts in css3 border radius between browsers.

#menu ul li:first-child {
    border-radius: 0px 8px 8px 0px;
}

#menu ul li:last-child {
    border-radius: 8px 0px 0px 8px;
}

<ul>
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">صفحتي</a></li>            
    <li><a href="#">كتبي</a></li>
    <li><a href="#">أصدقائي</a></li>            
    <li><a href="#">خروج</a></li>
</ul>

firefox

FireFox and Chrome

ie problem

IE Problem

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m suspecting it’s because of the rtl direction.

    Solution: add a class to your HTML for IE using conditionals – example:

    <!--[if IE]><div dir="rtl" class="ie"><![endif]-->
<!--[if !IE]><!--><div dir="rtl"><!--<![endif]-->
<div id="menu">
    <ul>
        <li><a href="#">الرئيسية</a></li><li><a href="#">صفحتي</a></li><li><a href="#">كتبي</a></li><li><a href="#">أصدقائي</a></li><li><a href="#">خروج</a></li>
    </ul>
</div>
</div>

    I’ve added the class to a containing div, but you can add it directly to the <html> tag (see http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ )

    And then you’ll have something like this in your CSS:

    #menu li:first-child {
    border-radius: 0 8px 8px 0;
}
#menu li:last-child {
    border-radius: 8px 0 0 8px;
}
.ie #menu li:first-child {
    border-radius: 8px 0 0 8px;
}
.ie #menu li:last-child {
    border-radius: 0 8px 8px 0;
}

    Full demo here http://dabblet.com/gist/2774749 – I’ve tested it and works the same in Chrome, Firefox, Opera and IE9.

    • 0