lundi 20 avril 2015

CSS3 Firefox Border Radius Clip

i am not sure why the Firefox browser adding pixellete border radius on right corner. If anyone notice it in the image i attached.

this is only happening in Firefox browser. Is there a way to fix it?

HTML:

<nav class=""id="menusystem">
    <ul><li class="active"><span><i class="fa fa-building-o"></i> Home</span></li>
        <li><span><i class="fa fa-calendar-o"></i> Book Now</span></li>
        <li><span><i class="fa fa-male"></i> Service Prices</span></li>
        <li><span><i class="fa fa-th"></i> Product Prices</span></li>
        <li><span><i class="fa fa-thumbs-o-up"></i> Our Testimonials</span></li>
        <li><span><i class="fa fa-group"></i> Our Events</span></li>
        <li><span><i class="fa fa-envelope-o"></i> Contact Us</span></li>
    </ul>
</nav>

CSS

nav {
    height:50px;
    box-sizing: border-box;
}

nav > ul {
    padding:0;
    margin:0;
}

nav > ul > li {
    display: block;
    float: left;
    height: 100%;
    line-height: 50px;
    text-align: center;
    width: 144.429px;
     background-color: rgb(128, 0, 128);
    border-color: rgb(255, 167, 252);
    color: rgb(255, 255, 255);
}

nav > ul > li:first-child {
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
}

nav > ul > li:last-child {
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
}

enter image description here

Aucun commentaire:

Enregistrer un commentaire