Interested in the layout of the block with rounded inward corners. It is important not just to round them up, but also to keep the stroke of the block. enter image description here

  • You can still look in the direction of jquery solutions if you do not want to mess with css malsup.com/jquery/corner - koks_rs

3 answers 3

Version @Ruslan_K, but with borders:

#main { margin: 40px; height: 100px; background-color: #1abc9c; position: relative; overflow: hidden; } #main .edge { position: absolute; } #main .edge.top { top: 0; left: 10px; right: 10px; bottom: 0; border-top: 1px solid #000; border-bottom: 1px solid #000; } #main .edge.left { left: 0; top: 10px; bottom: 10px; right: 0; border-left: 1px solid #000; border-right: 1px solid #000; } #main .corner { position: absolute; width: 20px; height: 20px; border-radius: 100%; background-color: #FFF; border: 1px solid #000; } #main .corner.top { top: -10px; } #main .corner.bottom { bottom: -10px; } #main .corner.left { left: -10px; } #main .corner.right { right: -10px; } 
 <div id="main"> <div class="edge top"></div> <div class="edge left"></div> <div class="corner top left"></div> <div class="corner top right"></div> <div class="corner bottom left"></div> <div class="corner bottom right"></div> </div>

    The basic idea: cut out extra areas with pseudo-elements.
    It .wrapper just two blocks in the markup ( .wrapper and .content ):

     * { box-sizing: border-box; } .wrapper { background-color: #efefef; width: 300px; height: 60px; margin: 40px; /** * Ключевые свойства * С помощью position: relative будем позиционировать псевдоэлементы для вырезания границ * С помощью overflow: hidden будем делать сектора */ position: relative; overflow: hidden; } /* Для наглядной демонстрации работы, не нужно в проекте */ .wrapper.demo { border: 2px solid #bad; overflow: visible; } .content { /* Цвет границы блока должен совпадать с границей будущих вырезанных секторов */ border: 2px solid #07c; width: 100%; height: 100%; } .wrapper::before, .wrapper::after, .content::before, .content::after { /* Цвет следует подобрать в цвет фона сайта для перекрытия части основного блока */ background-color: #fff; /* Цвет границы блока должен совпадать с границей основного блока */ border: 2px solid #07c; /* Делаем окружность */ border-radius: 50%; content: ''; /* Позиционируется относительно .wrapper. Это важно для понимания. */ position: absolute; width: 30px; height: 30px; } /* Позиционирование будущих секторов: верхний ряд */ .wrapper::before, .wrapper::after { top: -15px; } .wrapper::before { left: -15px; } .wrapper::after { right: -15px; } /* Позиционирование будущих секторов: нижний ряд */ .content::before, .content::after { bottom: -15px; } .content::before { left: -15px; } .content::after { right: -15px; } 
     <div class="wrapper"> <div class="content"></div> </div> <div class="wrapper demo"> <div class="content"></div> </div>

    The block with the .demo class .demo added just to understand how it all works.

    If it is necessary to make support for the double background of the sector, this can be achieved by filling the pseudo-elements with a linear gradient .

    You can generate a gradient using the Ultimate CSS Gradient Generator online service.

       #main { margin: 40px; height: 100px; background-color: #1abc9c; position: relative; overflow: hidden; } #main div { position: absolute; width: 20px; height: 20px; border-radius: 100%; background-color: #FFF; } .top { top: -10px; } .bottom { bottom: -10px; } .left { left: -10px; } .right { right: -10px; } 
       <div id="main"> <div class="top left"></div> <div class="top right"></div> <div class="bottom left"></div> <div class="bottom right"></div> </div>