圆角边框的各种css样式

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
body{
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
}


.region{ 
	width:200px;
	height:200px;
	margin:20px;
	font:20px/40px bold;
	text-align:center;
	background: #333;
	background: linear-gradient(45deg, #333, #999);
}


.radius{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}


.half-radius{
	border-top-left-radius: 20px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 0;
}


.circle{
   
-webkit-border-radius: 50%;
	-moz-border-radius:50%;
	border-radius: 50%;

}


.lemon{
   background: #F5F240;
   border: 1px solid #F0D900;
   border-radius: 10px 150px 30px 150px;
}

dabblet.html

<div class="region"></div>

<div class="region radius">
	radius
</div>


<div class="region half-radius">	
	half-radius
</div>


<div class="region circle">
	circle
</div>


<div class="region lemon">
	lemon
</div>

settings.json

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