CODEWITHSUNDEEP
csssafari
Orange Juice
Orange Juice

Reputation: 21

How to use border-radius in safari

http://show.bbflame.ru/border/ How to make parent(#div1) hide child's corners Child dont overflow parents

Upvotes: 2

Views: 511

Answers (2)

seahorsepip
seahorsepip

Reputation: 4809

#div1 {
   overflow: hidden !important; /*to make sure it will work always*/
}

should hide any overflowing object inside #div1 if javascript moves the child inside #div1 you have a chance it won't work as it should, try using a mask or give the css properties by javascript so the properties are assigned at the same time.

Upvotes: 0

Rob W
Rob W

Reputation: 348972

It's currently not possible to overflow the borders. The closest you can get is adding a border-radius to the second element, which is just enough to not exceed the border.

#div1{
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
#div2 {
    -webkit-border-radius: 14px;
    border-radius: 14px;
}

Fiddle: http://jsfiddle.net/jK7TP/

Upvotes: 1

Related Questions