CSS3 border-radius

dabblet.css

/**
 * CSS3 border-radius
 */

html { box-sizing: border-box; }

*,
*:before,
*:after { box-sizing: inherit; }


html, body {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	padding: 0;
	margin: 0;
}

body {
	background: #f06;
	background: linear-gradient(-45deg, #EEE, #AAA);
	min-height: 100%;
}
	
div {
	width: 37.5em;
	height: 18.75em;
	background-color: #5588CD;
	padding: 3.125em;
	margin: 50px auto;
}

/* http://www.w3.org/TR/css3-background/#corners */

.css1 { border-radius: 30px; }

.css2 { border-radius: 5em; }	

.css3 {
	border-top-left-radius: 40px;
	border-bottom-right-radius: 20px;
}
				
.css4 { border-radius: 30px 5px; }
		
.css5 {
	border-top-left-radius: 250px 50px;
	border-top-right-radius: 125px 25px;
}
	
.css6 { border-radius: 250px / 50px; }

.css5 { border-radius: 250px / 50px; }

dabblet.html

<div class="css1">
	<pre><code>
.css { border-radius: 30px; }
	</code></pre>
</div>

<div class="css2">
	<pre><code>
.selector {
border-radius: 5em;
}
	</code></pre>
</div>

<div class="css3">
	<pre><code>
.selector {
border-top-left-radius: 40px;
border-bottom-right-radius: 20px;
}
    </code></pre>
</div>

<div class="css4">
	<pre><code>
.selector {
border-radius: 30px 5px;
}
	</code></pre>
</div>

<div class="css5">
	<pre><code>
.selector {
border-top-left-radius: 250px 50px;
border-top-right-radius: 125px 25px;
}
	</code></pre>
</div>

<div class="css6">
	<pre><code>
.selector {
border-radius: 250px / 50px;
}
	</code></pre>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}