Как реализовать бордеры?

Question

Как реализовать сложные бордеры, как на рисунке ниже.

Бордеры должны иметь разную ширину обводки с белыми кругами и чередоваться.

Внутренний бордер должен обрезать изображение по своему размеру.

Answer 1

вот такой вариант устроит?

div {
    position: relative;
    z-index: 10;

    width: 150px;
    height: 150px;
    
    _border-radius: 75px;
    
    background: lime;
}

div:before {
    position: absolute;
    left:     10px;
    top:      10px;
    
    z-index:  1;
    content:  '';

    width: 120px;
    height: 120px;
    
    border-radius: 65px;
    border: 5px solid white;
    
    background: lime;
}

div:after {
    position: absolute;
    left:     25px;
    top:      25px;
    
    z-index:  1;
    content:  '';

    width: 90px;
    height: 90px;
    
    border-radius: 50px;
    border: 5px solid white;
    
    background: lime;
}

<div></div>

Answer 2

Наверное, раз требуются бордеры, то внутри должно быть изображение.

Обдумайте вариант решения SVG.
Приложение будет адаптивно, кросс-браузерно для всех современных браузеров, включая Edge MS и svg блок, обернутый контейнером .container будет участвовать в верстке, как обычный блок.

.container {
width:50vw;
height:50vh;
}
.crc {
fill:none;
stroke:#FCFFFF;
stroke-width:10;
}

<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 600 600" style="background:#F2F6F9" >  
     <defs>
         <!-- Маска -->
     <mask id="msk1" > 
            <rect  width="100%" height="100%"  fill="black" /> 
               <circle cx="300" cy="300" stroke="red" stroke-width="1"  r="180" fill="white" /> 
     </mask> 
     </defs> 
                        <!-- Обрезка изображения маской -->
          <image xlink:href="https://i.stack.imgur.com/6kywq.png" x="-140" y="-60" mask="url(#msk1)" width="800" height="780" /> 
                <!-- Белые круги           -->
           <circle class="crc" cx="300" cy="300" r="220"  />
             <circle class="crc" cx="300" cy="300"  r="260"  />
</svg>
</div>

Вариант анимации открытия, закрытия картинки при наведении.

Анимация основана на изменении радиуса маски от нуля до 180px

<animate attributeName="r" begin="svg1.mouseenter"  dur="1s" values="0;180"
  restart="whenNotActive" fill="freeze"/>

.container {
width:50vw;
height:50vh;
}
.crc {
fill:none;
stroke:#FCFFFF;
stroke-width:10;
}

<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 600 600" style="background:#F2F6F9" >  
     <defs>
         <!-- Маска -->
     <mask id="msk1" > 
            <rect  width="100%" height="100%"  fill="black" /> 
               <circle cx="300" cy="300" stroke="red" stroke-width="1"  r="0" fill="white" >
                  <animate attributeName="r" begin="svg1.mouseenter"  dur="1s" values="0;180" restart="whenNotActive" fill="freeze"/> 
                    <animate attributeName="r" begin="svg1.mouseleave"  dur="1s" values="180;0" restart="whenNotActive" fill="freeze"/>
               </circle>               
     </mask> 
     </defs> 
                      
          <image xlink:href="https://i.stack.imgur.com/6kywq.png" x="-140" y="-60" mask="url(#msk1)" width="800" height="780" /> 
                <!-- Белые круги           -->
           <circle class="crc" cx="300" cy="300" r="220"  />
             <circle class="crc" cx="300" cy="300"  r="260"  />
</svg>
</div>

БЛОГ НА HUSL

Как реализовать бордеры?

Ответы (2 шт):

Вариант анимации открытия, закрытия картинки при наведении.