Как добавить блоку такую рамку как на фото?

Question

Как сделать такую рамку с помощью html+css?

Answer 1

/* border */

.wr{
  /* делфем в обёртке отступ */
  padding: 5px;
  border-radius: 5px;
}

.cont{
  /* рисуем внутреннюю линию */
  border: 1px solid rgb(255, 255, 255, 0.40);
  border-radius: 5px;
}


/* other */
body{
  display: flex
}

.wr{
  background: green;
}

.cont{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px; 
}

<div class="wr">
  <div class="cont">
    example
  </div>
</div>

Answer 2

можно все сделать через один блок и :after:

.frame {
  position: relative;
  
  width:  300px;
  height: 300px;

  line-height:  300px;
  text-align:   center;
  color:        white;

  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  
  background: #FF5733;
}

.frame:after {
  content:  '';
  
  position: absolute;
  left:     20px;
  top:      20px;
  
  width:    calc(100% - 2 * 20px);
  height:   calc(100% - 2 * 20px);
  
  border:         1px solid white;
  border-radius:  20px;
}

<div class = 'frame'>КОНТЕНТ</div>

БЛОГ НА HUSL

Как добавить блоку такую рамку как на фото?

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