How to Create a Concave Bottom Border in CSS

How can I create a concave bottom border in CSS?

For a transparent background, you can use box-shadows :

DEMO

Explanation :

The point of this technique is to use a pseudo element with box-shadows and a transparent backcground to see through it. The pseudo element is abolutely positioned and has a much larger width than the container in order to (with the help of border radius) give a smooth inset curve to the bottom of the div.

To make it simple : The background of the div is the box-shadow of the pseudo element.

The z-index values allow the content of the div to be dispayed over the shadow.

****** EDIT *************************

With content scolling behind the shape, you can see this DEMO

html,body{

    height:100%;

    margin:0;

    padding:0;

    background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');

    background-size:cover;

}

div {

    background:none;

    height:50%;

    position:relative;

    overflow:hidden;

    z-index:1;

}

div:after {

    content:'';

    position:absolute;

    left:-600%;

    width:1300%;

    padding-bottom:1300%;

    top:80%;

    background:none;

    border-radius:50%;

    box-shadow: 0px 0px 0px 9999px teal;

    z-index:-1;

}

<div>content</div>

How do I create concave shaped borders around div elements?

You can use :before and :after pseudo elements to draw this shape.

.div {

  position: relative;

  overflow: hidden;

  padding: 50px 0;

}

.div-inner {

  position: relative;

  background: black;

  height: 120px;

}

.div-inner:before,

.div-inner:after {

  box-shadow: 0 0 0 80px #000;

  border-radius: 100%;

  position: absolute;

  height: 150px;  /* You can change height to increase or decrease concave radius */ 

  content: '';

  right: -20%;

  left: -20%;

  top: 100%;

}

.div-inner:after {

  bottom: 100%;

  top: auto;

}

<div class="div">

  <div class="div-inner"></div>

</div>

Is a concave border radius possible?

You can give the impression of a concave border using radial gradients on the background. For example, something like this:

#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}

Note that most webkit browsers still require prefixes for radial-gradients, and if you want to fully support older browsers you may need to implement the older gradient syntax too.

How can i create concave border?

Here's one way to do it. The fiddle you provided is using pseudo elements (:before and :after) to achieve the effect, so I adjusted their height/width and border-radius values:

#test{
    width: 100px;
    height: 300px;
    background: green;
    position: relative;
    display: inline-block;
}

#test:before{
    background: white;
    height: 15px;
    width: 100px;
    border-radius: 0 0 50% 50%;
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
}

#test:after{
    background: white;
    height: 15px;
    width: 100px;
    border-radius: 50% 50% 0 0 ;
    display: inline-block;
    content: '';
    bottom: 0;
    position: absolute;
}

fiddle: http://jsfiddle.net/KcP5k/24/

Is there a better way to create convex / concave borders on an element

Border radius, radial gradient and a filter can do it:

.box {
  width:200px;
  height:200px;
  background:#9baaad;
  position:relative;
  border-bottom-right-radius:50px; /* convexe part */
  filter:drop-shadow(0px 3px 3px grey); /* shadow */
}
/* concave part */
.box::before{
  content:"";
  position:absolute;
  top:100%;
  right:0;
  left:0;
  height:50px;
  background:
    radial-gradient(farthest-side at bottom right,transparent 98%,#9baaad 100%) 
    0/50px no-repeat;
}

<div class="box">

</div>

Concave shape boundary

You can use svg quadratic bezier path to create such a shape.

<svg version="1.1" height="400" width="400" viewBox="0 0 10 10">

  <defs>

    <style type="text/css">

      path:hover {

        fill: blue;

        transition: 0.5s ease;

      }

      path {

        transition: 0.5s ease;

      }

    </style>

  </defs>

  <path d="M0 0 Q5 3 10 0 7 5 10 10 5 7 0 10 3 5 0 0" stroke="none" fill="red" />

</svg>

How to create concave block?

I have added :pseudo element to add circular effect with border-radius

.main {

  display: inline-block;

  text-align: center;

  position: relative;

}

.main img {

  position: relative;

}

.main div {

  position: absolute;

  bottom: 0;

  width: 100%;

  height: 30%;

  z-index: 0;

}

.main div:after {

  content: '';

  width: 150%;

  left: -25%;

  background: white;

  height: 150%;

  top: -15%;

  position: absolute;

  z-index: -1;

  border-radius: 50%;

}

<div class="main">

  <img src="http://placeimg.com/400/300/animals">

  <div>

    Vestibulum ante ipsum primis in

  </div>

</div>

Create concave corners in css

Here is a good example of how I would tackle this:

http://jsfiddle.net/x4wLf/

HTML:

<div class='concave'>
    <div class='topleftconcave'></div>
    <div class='botleftconcave'></div>
</div>

CSS:

 div.concave {
    background:blue;
    width:150px;
    height:120px;
    position:relative;
}
div.topleftconcave {
    position:absolute;
    background:white;
    width:25px;
    height:35px;
    border-bottom-right-radius:500px;
}
div.botleftconcave {
    position:absolute;
    background:white;
    width:25px;
    height:35px;
    bottom:0;
    left:0;
    border-top-right-radius:500px;
}