Safari Too-Big Border Radius Creates an Interesting Effect

div,article {
width: 540px;
display: block;
border: 1px solid #ccc;
background-color: #fff;
padding: 100px 20px;
margin-bottom: 20px;
-moz-border-radius-bottomright: 800px 100px;
-moz-border-radius-topleft: 800px 100px;
-webkit-border-bottom-right-radius: 800px 100px;
-webkit-border-top-left-radius: 800px 100px;
border-bottom-right-radius: 800px 100px;
border-top-left-radius: 800px 100px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

When Firefox has a border radius that’s wider then the container, it changes the curve.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.