JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ramka">
<p>
Купить рамку
</p>
<div class="kvadrat">
Подскажите, пожалуйста, можно ли чисто на CSS сделать вот такую обводку блока, которая перерывается и на концах нее кружочки?
</div>
</div>

CSS

.ramka {
  margin-top: 50px;
  padding: 10px;
  border: 3px solid #ccc;
}
.ramka p {
  text-align: center;
  background: #fff;
  position: relative;
  margin: auto;
  top: -21px;
  width: 200px;
}
.kvadrat {
  background: #ccc;
  padding: 10px;
}
.ramka p:before {
  content: "☻";
  position: relative;
  left: -38px;
}
.ramka p:after {
  content: "☻";
  position: relative;
  left: 38px;
}