Concave Border

by black_horse

HTML

<div class="single-border">
  Single border
</div>

<div class="border-out">
  <div class="border-in">
    Sample Usage
  </div>
</div>

CSS

.single-border{
  height: 50px;
  padding: 20px;
  background:-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background:-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 21px), -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background:-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background-position:left bottom, right bottom, right top, left top;
    -moz-background-size:51% 51%;
    -webkit-background-size:51% 51%;
    background-size:51% 51%;
    background-repeat:no-repeat;
}

.border-in{
  height: 100px;
  padding: 40px;
  background:-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #e7dbda 21px), -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #e7dbda 21px), -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, #e7dbda 21px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #e7dbda 21px);
    background:-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #e7dbda 21px), -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #e7dbda 21px), -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #e7dbda 21px), -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #e7dbda 21px);
    background:-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #e7dbda 21px), -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #e7dbda 21px),...