Bordes personalizados

Puedes personalizar los bordes de tus cajas con la imagen que quieras.

Nota

se recomienda que sea una imagen hecha para ello, preferiblemente con fondo transparente, por ejemplo imagenes de tipo border design

CodiLink logo codi.link


<div>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo ratione minima 
  volupta Praesentiumatis atque vero minus omnis molestias fuga ut inventoreesse 
  sequi, provident accusamus sed beatae voluptate repudiandae accusantium odio 
  nam! dolore totam quidem adipisci soluta. Corrupti ipsam aa.</p>
</div>      

<style>
  
  body{
    display: grid;
    place-items: center;
    height: 80vh;
  }

  div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 300px;
    min-height: 300px;
    border-image-source: url(https://cdn.pixabay.com/photo/2016/02/19/15/29/frame-1210511_640.png);  
    border-image-repeat: repeat;

    /* Dependiendo de la imagen y el contenido de la caja, estos valores deben cambiarse 
    para que se ajusten bien a la imagen. */

    padding: 10px 10px;
    border-image-slice: 23%;
    border-image-width: 20%;
    border-image-outset: 15px;
  }

</style>