The Shapes of CSS

HTML

<h3>Equal border-radius for all corners.</h3>
  <p class="box1"></p>
<h3>Border-radius on top-left and bottom-right corners.</h3>
  <p class="box2"></p>
<h3>border-radius on top-right and bottom-left.</h3>
  <p class="box3"></p>
<h3>Different border-radius for all corners.</h3>
  <p class="box4"></p>
<h3>Circle</h3>
  <p class="circle"></p>
<h3>Oval</h3>
  <p class="oval"></p>
<h3>Triangle Up</h3>
  <p class="triangle-up"></p>
<h3>Triangle Down</h3>
  <p class="triangle-down"></p>
<h3>Curved Tail Arrow</h3>
  <p class="curvedarrow"></p>
<h3>Star (6-points)</h3>
  <p class="star-six"></p>
<h3>Heart</h3>
  <p class="heart"></p>
<h3>Egg</h3>
  <p class="egg"></p>
<h3>Talk Bubble</h3>
  <p class="talkbubble"></p>
<h3>12 Point Burst</h3>
  <p class="burst-12"></p>
<h3>Yin Yang</h3>
  <p class="yin-yang"></p>

CSS

.box1  { 
/*General box properties*/
background-color:lightblue;
width: 400px;
height:30px;
padding:10px;
margin:20px;
height:50px
/* using border-radius */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:2px solid #00f;
 }

.box2 {
/*General box properties*/
background-color:lightgreen;
width: 400px;
height:30px;
padding:10px;
margin:20px;
height:50px
/* using border-radius */
-webkit-border-radius: 24px 0;
-moz-border-radius: 24px 0;
border-radius: 24px 0;
border:2px solid green;
}
.box3 {
/*General box properties*/
background-color:pink;
width: 400px;
height:30px;
padding:10px;
margin:20px;
height:50px
/* using border-radius */
-webkit-border-radius: 0 24px;
-moz-border-radius: 0 24px;
border-radius: 0 24px;
border:2px solid #f00;
}
.box4 {
/*General box properties*/
background-color:#fffea1;
width: 400px;
height:30px;
padding:10px;
margin:20px;
height:50px
/* using border-radius */
-webkit-border-radius:  5px 20px 40px 60px;
-moz-border-radius:  5px 20px 40px 60px;
border-radius:  5px 20px 40px 60px;
border:2px solid #fc0;
}

.circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

.oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

.curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
.curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

.heart {
    position: relative;
    width: 100px;
    height: 90px;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

.egg {
   display:block;
   width: 126px;
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
}

.talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
.talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}


.burst-12 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
.burst-12:before, .burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
.burst-12:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
.burst-12:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}

.yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}

.yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}

.yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}

Example

Click to DEMO