<section class='container'></section>
:root {
--border-repeat: stretch;
--border-style: ridge;
--border-image-slice: 120;
--border-image-width: 20%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-wrap: wrap;
background-color: white;
}
section{
text-align: center;
display: flex;
width: 10rem;
flex-wrap: nowrap;
padding: 2rem;
height: 10rem;
align-items: center;
justify-content: center;
}
.container {
font-family: Georgia, 'Times New Roman', Times, serif;
border-image-source: url('https://media.tenor.com/9vRAkntogEMAAAAd/background.gif');
border-image-slice: var(--border-image-slice);
border-image-repeat: var(--border-repeat);
border-width: 2rem;
border-image-width: var(--border-image-width);
border-color: grey;
border-style: var(--border-style);
transition: all 0.3s ease;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.