CODEWITHSUNDEEP
google-chromesafariwebkitcss
krozero
krozero

Reputation: 6433

css3 border-radius not working for child element

I'm trying to develop slide box which have border radius in parent div. It works fine with Firefox but got problem in safari and chrome.

The problem is that child element overlaps rounded border of parent div.

You can see the example at http://jsfiddle.net/7KgEh/6/. Have a look in safari, chrome and firefox; you'll see difference in the right side the child div is overlapping rounded border of parent div.

I searched internet but most of post pointed it as webkit bug. Anybody knows the solution?

Upvotes: 13

Views: 6288

Answers (3)

arik
arik

Reputation: 29260

Simply add overflow: hidden; to the container element with the rounded borders.

Upvotes: 34

Matt Whipple
Matt Whipple

Reputation: 7134

If you don't need to interact with that background you could just bury it with z-index:

http://jsfiddle.net/7KgEh/23/

Bury the background and move the button up to be a sibling of it and write the extra line to keep them aligned. If this is for display purposes this will overall be more flexible (also allowing for things like the button overlapping the slot). If there are structural reasons then another option may be better.

Upvotes: 0

Teena Thomas
Teena Thomas

Reputation: 5239

the rounded corner is working fine, it's just taking width:100% (of page) for <div class='box'>, hence you cannot see it. try width:50% and you will see what I'm saying. Here try this jsfiddle

Upvotes: 0

Related Questions