CODEWITHSUNDEEP
cssborder
Ben Green
Ben Green

Reputation: 51

border-radius issue CSS

Having a bit of an issue with border-radius. I have successfully rounded off my rectangle, but I am having an issue with rounding the hover that I have placed over it. You will see in the top and bottom corners of the rounded rectangle the hover itself is not rounded and is actually a rectangle. I have tried rounding it but it rounds the center as well. I know this probably doesn't make sense but you will understand by looking here: http://jsfiddle.net/hCg3J/

All I want to do is to have each selection highlight the whole of that area, and not stick out.

HTML:

<ul class="pageitem">
    <li class="list" style="border-top:none;"><a href="iphone4.html";><span class="name">iPhone 4/4S</span><div class="arrow"></div></a></li>
    <li class="list"><a href="iphone3.html";><span class="name">iPhone 3G/3GS</span><div class="arrow"></div></a></li>
    <li class="list"><a href="ipod.html";><span class="name">iPod Touch</span><div class="arrow"></div></a></li>
</ul>

CSS

.pageitem {
    -webkit-border-radius: 8px;
    behavior: url(/border-radius.htc);
    border-radius: 8px;
    position:relative;
    zoom: 1;
    -moz-border-radius: 8em;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    background-color: #fff;
    border: #878787 solid 1px;
    font-size: 12pt;
    overflow: hidden;
    padding: 0;
    height: auto;
    width: auto;
    margin: 3px 9px 17px;
    list-style: none
}

Upvotes: 1

Views: 1115

Answers (1)

mkk
mkk

Reputation: 7693

Just add proper -webkit-border-radius in .list:hover, name:hover and adjust it to your needs.

Here is a jsfiddle proof of concept. What you need to do is to round only top-left and top-right corner for top element and bottom-left, buttom-right for the bottom element. I would suggest adding a special class for these elements.

UPDATE:

Actually as I suggested in comment I have added first-child and last-child selectors, updated fiddle

.list:hover:first-child, name:hover:first-child {
     -webkit-border-radius: 8px 8px 0px 0px;
}

.list:hover:last-child, name:hover:last-child {
     -webkit-border-radius: 0px 0px 8px 8px;
}

Upvotes: 6

Related Questions