Menu
Rounded corners fail to cut off content in webkit browsers (e.g. Chrome) if position:relative;
See this demo.
HTML:
<div class="outer"> <div class="inner"> </div> <div> CSS:
.outer { background:yellow; border:solid 1px black; position:relative;/* Setting this means rounded corners don't cut off content! */ overflow:hidden; -moz-border-radius: 12px; border-radius: 12px; } .inner { background:red; height:50px; } Anyone know of a fix? Thanks-
997
The border-radius CSS property rounds the corners of an element's outer border edge.
The border-radius property defines the radius of the element's corners. Tip: This property allows you to add rounded corners to elements!
The CSS property border-radius adds rounded corners on images. You can round all of the image's corners or just select corners, vary the radius on different corners or display an image in the shape of an oval or a circle.
CSS3 Rounded corners are used to add special colored corner to body or text by using the border-radius property.A simple syntax of rounded corners is as follows − #rcorners7 { border-radius: 60px/15px; background: #FF0000; padding: 20px; width: 200px; height: 150px; }
http://jsfiddle.net/USd5s/
Hate to add extra dom elements but a simple wrapper fixes this right up. You don't have to use my choice of element or css method either, span and qualified css is just my taste. or something would work just as well.
151
You can force it to render in 3d with:
-webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); 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
