How to create Border with text

Question

I want to create HTML/CSS for A4 size paper which I can, however, I also want to have Brand name running along the borders (like below). How to create borders with text?

Answer 1

https://codepen.io/mrigankvallabh/pen/LYNYoMq

<div class="A4">
    <div id="sheet1" class="sheet padding-10mm">
      <h1 class="text-center">Heading</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nostrum neque dolores voluptates fuga aliquam
        eos porro maxime atque quisquam, ab ullam deserunt rem excepturi libero consequatur iusto facilis quidem cupiditate
        magni amet at. Maiores, nisi, ab corporis, pariatur repellat voluptatem quod harum nobis dolorum suscipit totam odit
        enim quisquam nulla ea quas tempore tempora impedit repudiandae dolorem numquam. Iure accusamus iusto quas
        aspernatur culpa voluptas rem repellat voluptate accusantium, dolorum maiores impedit. Commodi qui sunt eaque ut
        ullam eius, nostrum, debitis placeat tempora quod blanditiis modi quasi numquam aliquam, accusantium perspiciatis
        quibusdam quas officiis. Alias provident quisquam reiciendis at iure nulla, veritatis maiores iste autem eaque non
        voluptas consequuntur. Dolorum a incidunt fugiat iusto vero excepturi corrupti, doloremque rem! Voluptas, labore.
        Quia iusto labore neque, dolorum blanditiis rerum, nemo sed adipisci doloremque alias cupiditate porro. Ducimus,
        nesciunt. Facilis asperiores porro dolor ratione, vero placeat dolorum error inventore possimus eligendi suscipit
        maiores aliquid in illo quae fugit deleniti ea tenetur velit quaerat unde impedit. Libero accusamus dolore aut
        beatae asperiores eligendi unde voluptatibus, doloremque ipsum aliquid repudiandae ea tempore nobis rem cum tenetur.
        Delectus temporibus eos doloremque, modi quas iusto facilis cumque assumenda atque ad maiores excepturi. Accusantium
        vero numquam temporibus voluptatem quis molestiae dignissimos dolorum! Accusamus distinctio autem sint incidunt
        debitis quisquam illum delectus perspiciatis, accusantium sed reiciendis, repudiandae nihil, eveniet sunt. Voluptas
        modi consequatur quia asperiores, beatae sequi atque nemo ex officia obcaecati aliquid soluta, voluptatem
        consequuntur vero magni quod, accusantium perferendis deserunt ullam laudantium. Excepturi, dolore molestias!
      </p>
      <div class="tb-text-border space-preserve" data-content="Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics">Yusen Logistics    -    Yusen Logistics         <span class="large-text">    Yusen Logistics    </span>         Yusen Logistics    -    Yusen Logistics</div>
      <div class="lr-text-border space-preserve" data-content="Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics">Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics</div>
    </div>
  </div>

@page { margin: 0; size: A4;}
/* Paper Size for A4 */
div.A4               .sheet { width: 210mm; height: 296mm }
div.A4.landscape     .sheet { width: 297mm; height: 209mm }

.sheet {
  position: relative;
}

.sheet.padding-10mm {  padding: 10mm; }

/** For screen preview **/
@media screen {
  body { background: #e0e0e0 }
  .sheet {
    background: transparent;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
    margin: 5mm auto;
  }
}

/** Fix for Chrome issue #273306 **/
@media print {
  div.A4 { width: 210mm }
  div.A4.landscape { width: 297mm }
}

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
p {  text-align: justify; }
.text-center { text-align: center; }
.space-preserve {white-space: pre; }
.large-text { font-size: 2rem; }
.tb-text-border {
  display: block;
  font-family: 'Abril Fatface', cursive;
  color: dodgerblue;
  background-color: #fff;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 2mm 5mm;
  box-sizing: border-box;
  text-align: center;
  z-index: -2;
}

.tb-text-border::after {
  content: attr(data-content);
  display: block;
  transform: rotate(180deg);
  position: absolute;
  width: 100%;
  bottom: 0; left: 0;
  padding: 2mm 5mm;
  box-sizing: border-box;
  white-space: pre;
}

.lr-text-border {
  display: block;
  font-family: 'Abril Fatface', cursive;
  color: dodgerblue;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 8mm 2mm;
  box-sizing: border-box;
  writing-mode: vertical-rl;
  text-align: center;
  z-index: -1;
}

.lr-text-border::after {
  content: attr(data-content);
  display: block;
  transform: rotate(180deg);
  position: absolute;
  height: 100%;
  bottom: 0; left: 0;
  padding: 8mm 2mm;
  box-sizing: border-box;
}

Answer 2

You could use the border-image property of CSS. It will take some experimenting with image size but here's one made from the image you shared above with no editing.

div {
  width: 595px;
  height: 842px;
  border: 40px solid transparent;
  padding: 30px;
  border-image: url(https://i.stack.imgur.com/xv03p.png) 30 round;
  box-sizing: border-box;
}

<div>
  <h1>Your content here</h1>
</div>