Css Borders Bend Inside

I want to build the container with bended borders inside the element. Is it possible to do using only css? If it is container can should have auto height

Solution 1:

You can try this method - draw a div with rounded borders before and after your div

CSS:

#bend-inside{
    width: 500px;
    overflow: hidden;
}

#box-before{
    background-color: white;
    border-radius: 600px;
    height: 600px;
    width: 600px;
    display: inline-block;
    position: absolute;
    z-index: 2;
   right: 550px;
    top: -200px;
    overflow: hidden;
}

#box{
    background-color: #e5e5e5;
    width: 400px;
    height: 200px;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    right: 200px;
}

#box-after{
    background-color: white;
    border-radius: 600px;
    height: 600px;
    width: 600px;
    display: inline-block;
    position: absolute;
    z-index: 2;
    right: -350px;
    top: -200px;
    overflow: hidden;
}

HTML:

<div id="bend-inside">
    <div id="box-before"></div>
    <div id="box"></div>
    <div id="box-after"></div>
</div>

Example

Solution 2:

u can use this technique:

HTML:

<divclass='continer'><divclass='left'></div><divclass='right'></div></div>

CSS:

.continer{
    width:500px;
    height:200px;
    background:red;
}
.right{
    float:right;
    width:10%;
    height:120%;
    border-radius:100%;
    margin-top:-5%;
    margin-right:-4%;
    background:white;
}
.left{
    float:left;
    width:10%;
    height:120%;
    border-radius:100%;
    margin-top:-5%;
    margin-left:-4%;
    background:white;
}

example here: http://jsfiddle.net/NSm8M/

Solution 3:

If you are looking for a pure CSS solution, then one option could be to use ::before and ::after pseudo-elements at achieve something similar.

Demo: http://jsfiddle.net/abhitalks/2mx6b/

HTML:

<divclass="curved"></div>

Relevant CSS:

.curved {
    width: 400px;
    height: 200px;
    background-color: #ccc;
    border-radius: 0035%35%;
    position: relative;
}
.curved::before {
    height: 200px;
    width: 40px;
    border-radius: 040%50%0;
    content: '';
    position: absolute;
    top: 0px; left: 0px;
}
.curved::after{
    height: 200px;
    width: 40px;
    border-radius: 40%0050%;
    content: '';
    position: absolute;
    top: 0px; right: 0px;
}

Update:

Another method could be to use radial-gradient. This would get rid of the pseudo-elements altogther. However, the downside is that you would have to carefully craft it out and also keep in mind cross-browser compatibilities.

Anyway, just to show how it could be done:

Demo 2: http://jsfiddle.net/abhitalks/2mx6b/2/

CSS:

.curved {
    width: 400px;
    height: 200px;
    border-radius: 0040%40%;
    background: 
        -webkit-radial-gradient(-19% center, circle, orange 0, orange 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, orange 0, orange 124px, transparent 50px) #ccc;
    background-clip: padding-box;
}

Note: Regarding your comment: No. You can't actually use transparent in any of the proposed solutions. The reason being that either the parent element's background would bleed through or in case of multiple backgrounds, the lower background in stacking order will then bleed through.