Сделать рамку css

Question

Необходимо сделать такую рамку с помощью css, как на картинке, то есть внешняя граница - прямоугольник, внутренняя - скругленный прямоугольник. Это должна быть именно РАМКА, потому что ее нужно наложить сверху на другие элементы, поэтому в центре должно быть пустое место, чтобы другие элементы не перекрылись

Answer 1

Самое сложное - это заставить себя победить лень. А остальное делается просто:

.border {
  position: relative;
  height: 140px; width: 300px;
  padding: 0.5em;
  overflow: hidden;
  box-shadow: 0 0 0 15px #000;
}
.border::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  z-index: 1;
  border-radius: 8px;
  box-shadow: 0 0 0 5px #000;
  pointer-events: none;
}

body { margin: 0; min-height: 100vh; background: 50% 50% / cover url('https://i.stack.imgur.com/tWGMC.jpg') no-repeat; display: grid; place-items: center; }

<div class="border">Необходимо сделать рамку с помощью CSS: внешняя граница - прямоугольник, внутренняя - скругленный прямоугольник.<br><br>Фон блока должен быть прозрачным.</div>

Вариант с полосой прокрутки:

.border {
  position: relative;
  height: 140px; width: 300px;
  padding: 0.5em;
  overflow: hidden;
  box-shadow: 0 0 0 15px #000;
}
.border::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  z-index: 1;
  border-radius: 8px;
  box-shadow: 0 0 0 5px #000;
  pointer-events: none;
}

.text {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  padding: 0.5em 0em 0.5em 1.1em;
  overflow: hidden scroll;
}

.text::-webkit-scrollbar {
  width: 1em;
  background-color: #0000;
}

.text::-webkit-scrollbar-thumb {
  width: 1em;
  background: 0.25em 0.5em / 0.5em calc(100% - 1em) linear-gradient(90deg, #0002, #0002) no-repeat, 0.25em 0% / 0.5em 0.5em radial-gradient(circle at 50% 100%, #0002 0.25em, #0000 0.25em) no-repeat, 0.25em 100% / 0.5em 0.5em radial-gradient(circle at 50% 0%, #0002 0.25em, #0000 0.25em) no-repeat;
}
.text:hover::-webkit-scrollbar-thumb {
  background: 0.25em 0.5em / 0.5em calc(100% - 1em) linear-gradient(90deg, #000b, #000b) no-repeat, 0.25em 0% / 0.5em 0.5em radial-gradient(circle at 50% 100%, #000b 0.25em, #0000 0.25em) no-repeat, 0.25em 100% / 0.5em 0.5em radial-gradient(circle at 50% 0%, #000b 0.25em, #0000 0.25em) no-repeat;
}

body { margin: 0; min-height: 100vh; background: 50% 50% / cover url('https://i.imgur.com/pCm96IG.png') no-repeat; display: grid; place-items: center; }

<div class="border">
  <div class="text">Необходимо сделать такую рамку с помощью css, как на картинке, то есть внешняя граница - прямоугольник, внутренняя - скругленный прямоугольник. Это должна быть именно РАМКА, потому что ее нужно наложить сверху на другие элементы, поэтому в центре должно быть пустое место, чтобы другие элементы не перекрылись</div>
</div>

БЛОГ НА HUSL

Сделать рамку css

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