CODEWITHSUNDEEP
hoverparentcssabsolute
Roman Pominov
Roman Pominov

Reputation: 1433

CSS border-radius parent child issue (with :hover & position:absolute)

There is known problem with border radius and child elements. Child elements protrude from rounded corners of parent.

Common solution is to add overflow:hidden to parent element. But it still doesn't work when parent have position:absolute.

http://jsfiddle.net/Xhrx8/2/

Upvotes: 3

Views: 6483

Answers (5)

Samuel
Samuel

Reputation: 43

You need to force the hardware acceleration through css3.

#items {
[......]
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

Upvotes: 0

honkskillet
honkskillet

Reputation: 3137

I like user1136403's answer, but I'd use the first and last-child css selectors. That way you don't have to add the id="top", id="bottom" to the first and last li's in the HTML.

HTML 

<div id="items">
   <div >One</div>
   <div>Two</div>
   <div>Three</div>
   <div >Four</div>
</div>

CSS

#items {
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
position: absolute;
}
#items div {
border-bottom: 1px solid black;
padding: 5px;
}    
#items div {
border-bottom:none; //removes the double border on the bottom
}
#items div:hover{
background-color: #ccc; //this is the only background color def you need
}
#items div:first-child:hover {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
#items div:last-child:hover {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

Also note you don't need 'background-color' in the first, last-child css blocks. It is already defined in #items div:hover{}. Here is the fiddle. http://jsfiddle.net/honkskillet/CHL8K/

Upvotes: 1

Ashwin
Ashwin

Reputation: 12421

It seems that is a bug with chrome css.
A workaroud that we can do is use a wrapper as

<div style="position:absolute">
    <div id="items">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
    </div>
<div>

and remove position:absolute from #items

FIDDLE

Upvotes: 2

Neeraj
Neeraj

Reputation: 142

This is a known bug in Chrome (Works fine in Firefox).

You'll need a wrapper around your DIV #items and assign properties to that wrapper.

Upvotes: 1

İlker Korkut
İlker Korkut

Reputation: 3250

HTML

 <div id="items">
<div id="top">One</div>
<div>Two</div>
<div>Three</div>
<div id="bottom">Four</div>

CSS

#items {
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
position: absolute;
}

 #items div {
border-bottom: 1px solid black;
padding: 5px;
}

#items #top:hover {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: #ccc;
}
#items div:hover{
background-color: #ccc;
}
#items #bottom:hover {
background-color: #ccc;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
 }

Live Example http://jsfiddle.net/Xhrx8/3/

Upvotes: 3

Related Questions