twitter bootstrap - Responsive round inside border-bottom effect for a div -

twitter bootstrap - Responsive round inside border-bottom effect for a div -

trying accomplish similar effect on image : http://i.imgur.com/ztkmou8.jpg rounded edges inner border of div. possible css? div suppose total responsive best have border effect can smaller or bigger depending on size of div.

class="snippet-code-css lang-css prettyprint-override">.image-container { border-bottom:#000 30px solid; border-radius: 1em 4em 1em 4em; border-bottom: 50px solid; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } class="snippet-code-html lang-html prettyprint-override"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet"/> <div class="container image-container"> <img class="img-responsive" src="http://i.imgur.com/uqxzmk4.jpg" /> </div>

maybe can point in right direction, since think original image made in photoshop...

try adding image selector in css. can tweak px depending on how want it.

css:

.image-container { background-color:black; } .img-responsive{ width:100%; -webkit-border-bottom-right-radius: 50px; -webkit-border-bottom-left-radius: 50px; -moz-border-radius-bottomright: 50px; -moz-border-radius-bottomleft: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; }

see: jsfiddle

twitter-bootstrap rounding border-box