如何制作div的倒转曲线或边界半径

Question

I have been working on one project in which i have to style a border of a div inverted to achieve this i can only use css and js i cannot use any plugins. I have gone through several online posts and similar looking questions on stack but couldnt really find what i want , I am attaching a for reference as well as a fiddle of what i have tried so far.

 .outer { overflow: hidden; } .inner { border: 1px solid #888; } .inner i { width: 40px; height: 40px; border: 1px solid #888; border-radius: 50%; background-color: #fff; } .inner .top { margin-top: -20px; } .inner .bottom { margin-top: -20px; margin-bottom: -22px; } .inner .left { float: left; margin-left: -20px; } .inner .right { float: right; margin-right: -20px; } .content { min-height: 80px; } 

 <div class="outer"> <div class="inner"> <i class="top left"></i> <i class="top right"></i> <div class="content"></div> <i class="bottom right"></i> <i class="bottom left"></i> </div> </div> 

Answer 1

Am sure This will help you

Demo: http://jsfiddle.net/mxehp3sh/2/

HTML

   <div id="a" class="circle-border">B</div>

CSS

    body{background:yellow;}
  .circle-border {margin:10px;
  display: inline-block;    
position: relative;    
height: 100px;
text-align: center;
line-height: 100px;
vertical-align: middle;
 }

 #a {
width: 90%;
border-left: none;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
background-image: -moz-radial-gradient(
    100% 50%,
    circle closest-corner, 
    transparent 0,
    transparent 55px, 
    transparent  56px, 
    grey 57px 
);
background-image: -webkit-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
background-image: -ms-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
background-image: -o-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
background-image: radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
}