Menu
I've noticed that if I have a div with a width greater than 965 pixels and a border radius on less than all 4 corners, there is a stray vertical line in the div. Here's a jsFiddle link... http://jsfiddle.net/Z3vFp/4/. Notice that this only occurs in Safari. Any thoughts? Also note that the 965 pixel threshold may be a little different in jsFiddle.
EDIT: I'm on a Macbook Pro with Retina display. I guess it's an rMBP thing?
EDIT 2: Here's a jsFiddle screencap. http://i.imgur.com/0rqSS.png
398
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
The border-radius property defines the radius of the element's corners. Tip: This property allows you to add rounded corners to elements! This property can have from one to four values.
The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
add -webkit-background-clip: padding-box;
.foo {
width: 966px;
height: 50px;
background-color: lightgray;
padding: 25px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
-webkit-background-clip: padding-box;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
