Как сделать такую рамку в CSS?

288

08 января 2018, 08:46

Подскажите, пожалуйста, можно ли чисто на CSS сделать вот такую обводку блока, которая перерывается и на концах нее кружочки?

Answer 1

Пример

* { 
  box-sizing: border-box; 
  margin: 0; 
} 
 
.frame { 
  border: 2px solid #00f; 
  max-width: 500px; 
  margin: 15px auto; 
} 
 
.frame__title { 
  font-size: 18px; 
  padding-left: 10px; 
  padding-right: 10px; 
} 
 
.frame__title>span { 
  display: inline-block; 
  position: relative; 
} 
 
.frame__title>span:before, 
.frame__title>span:after { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: -10px; 
  margin-top: -3px; 
  width: 6px; 
  height: 6px; 
  background: #00f; 
  border-radius: 50%; 
} 
 
.frame__title>span:after { 
  left: auto; 
  right: -10px; 
} 
 
.frame__content { 
  padding: 15px; 
  background: #f7f7f7; 
}

<fieldset class="frame"> 
  <legend align="center" class="frame__title"> 
    <span>Title</span> 
  </legend> 
  <div class="frame__content">Content</div> 
</fieldset>