можно ли через css border реализовать рамки? как на фото

Question

Можно ли реализовать через css свойства border вот эти рамки?

Answer 1

Проще и надёжнее сделать рамку не через border, а добавив на задний план псевдоэлемент с нужным градиентом:

body { background-color: #849d8f; }

.banner-post {
  position: relative;
  height: 150px; width: 350px;
  border-radius: 6px;
  background-color: #f8f7f4;
  margin: 20px auto;
}
.banner-post::before {
  content: '';
  position: absolute;
  top:-6px; left:-6px; z-index:-1;
  height: inherit; width: inherit;
  padding: 6px;
  border-radius: 12px;
  background-image: repeating-linear-gradient(-45deg, #f8f7f4 0px, #f8f7f4 9px, #92cdff 10px, #92cdff 19px, #f8f7f4 20px, #f8f7f4 29px, #fe9e90 30px, #fe9e90 39px);
  box-shadow: 0 3px 12px -2px black;
}

<div class="banner-post"></div>

Answer 2

Альтернативный вариант, без псевдоэлемента.

https://codepen.io/alexeyten/pen/yLJLZrw

.envelope {
  width: 500px;
  height: 300px;
  border-radius: 30px;
  border: 10px solid transparent;
  padding: 20px;
  
  background-image: 
    linear-gradient(#ddd, #ddd),
    repeating-linear-gradient(
      135deg,
      red 0px, red 10px,
      #ddd 10px, #ddd 20px,
      blue 20px, blue 30px,
      #ddd 30px, #ddd 40px
    );
  background-origin: border-box;
  background-clip:
    padding-box, border-box;
}

<div class="envelope">Вам письмо!</div>

БЛОГ НА HUSL

можно ли через css border реализовать рамки? как на фото

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