Shapes

dabblet.css

/*		Shapes			*/
section {
  display: inline-block;
  margin: 3em;
  width: 100px;
  height: 100px;
  background: yellow;
  box-shadow: 0 0 2px black;
}
 
.circle-radius-single {
  border-radius: 50px;
}
 
.circle-radius-2-values {
  border-radius: 0px 100px;
}
 
.circle-radius-4-values {
  border-radius: 37px 10px 17px 43px;
}
 
.ellipse-radius-single {
  border-radius: 13% / 46%;
}
 
.ellipse-radius-2-values {
  border-radius: 15px 115px / 69px 200px;
}
 
.ellipse-radius-4-values {
  border-radius: 37px 10px 17px 43px / 18px 5px 27px 9px;
}

dabblet.html

<section class="circle-radius-single"></section>
<section class="circle-radius-2-values"></section>
<section class="circle-radius-4-values"></section>
<section class="ellipse-radius-2-values"></section>
<section class="ellipse-radius-single"></section>
<section class="ellipse-radius-4-values"></section>

dabblet.js

//

settings.json

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