JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<div class="wrapper">
  <div class="custom-border">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi doloribus, libero unde, reiciendis esse voluptatum tempora, culpa rerum a exercitationem laborum. Quod deserunt nostrum, illo facilis eius ex consectetur odit.
  </div>
</div>

CSS

body {
  background-color: #1a1a1a;
}

.wrapper {
  display: flex;
}

.custom-border {
  position: relative;
  width: 200px;
  background-color: #1a1a1a; /* Цвет фона */
  clip-path: polygon(
  20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
  calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px
  );
  border: solid 2px #FFCF70;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  
  &::before {
    position: absolute;
    top: 7px;
    left: -13px;
    content: "";
    width: 42px;
    height: 3px;
    transform: rotate(-45deg);
    background-color: #FFCF70;
  }
  
  &::after {
    position: absolute;
    top: 7px;
    right: -13px;
    content: "";
    width: 42px;
    height: 3px;
    transform: rotate(45deg);
    background-color: #FFCF70;
  }
 }