/ Published in: CSS
CSS Rounded Corners without images
support: Firfox 2-3, Safari, Chrome, Opera 9.5(use svg)
support: Firfox 2-3, Safari, Chrome, Opera 9.5(use svg)
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
= HTML ================================================== <div class="roundedbox">...</div> = CSS =================================================== .roundedbox { width: 100px; height: 100px; background: #666; -webkit-border-radius: 5px; /* -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-right-radius:5px; -webkit-border-bottom-left-radius:5px; */ -moz-border-radius: 5px; /* -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; */ border-radius: 5px; /* border-top-left-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; */ } /*= CSS hack for Opera 9.5 Rounded Corners */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .roundedbox { background:transparent url(shadow.svg); } } = SVG file ============================================== <?xml version="1.0"> <svg xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100%" height="100%" rx="5" style="fill:#666666;" /> </svg>