CODEWITHSUNDEEP
htmlcsssafari
David
David

Reputation: 4873

Safari Border Radius clipping issue

I know similar questions to this have been asked, but they all point to background-clip which isn't working.

The top is Safari, the bottom is everybody else: http://tinypic.com/r/2ng616v/5

How my HTML is structured:

<div class="parent" style="border:1px solid gray;border-radius:5px">
        <div class="child"></div>
</div>

What's the best way to fix Safari with this setup?

Upvotes: 0

Views: 737

Answers (2)

Vladislav Stanic
Vladislav Stanic

Reputation: 795

How about this solution? I added left: 0; and decreased width of .child. If you need to change its size just change width instead of left position.

.parent {
width:200px;
height:30px;
border-radius:15px;
overflow:hidden;
position:relative;
border:1px solid black;
}
.child {
width:70px;
height:30px;
border-radius:15px;
position:absolute;
left:0px;
background:red;
}

jsfiddle

Upvotes: 1

Kabb5
Kabb5

Reputation: 3870

Try this…

background-clip: padding-box;  
-moz-background-clip: padding;  
-webkit-background-clip: padding;

Read more here: http://www.css3.info/preview/background-origin-and-background-clip/

Upvotes: 0

Related Questions