Here is the image we use for the border frame on the website https://wearyourdictionary.blogspot.com/, as of June 2025. It’s a free-to-use image.
Below is the portion of CSS where we apply the border frame image:
.main-content {
flex-grow: 1;
width: 100%;
max-width: 100%;
padding: 20px;
margin: 0 auto;
background-color: var(--color-background);
border-radius: 8px;
border-width: 20px;
border-style: solid;
border-image-source: url('https://i.imgur.com/WWCGIdJ.png');
border-image-slice: 40%;
border-image-repeat: stretch;
box-sizing: border-box;
}
.sidebar {
position: sticky;
top: 40px;
left: -250px;
padding: 20px;
background: #131314;
border-radius: 8px;
color: #ececeb;
height: fit-content;
max-width: 280px;
flex-shrink: 0;
margin-left: calc(-1 * var(--sidebar-width) - var(--padding-general) + 110px);
margin-right: var(--padding-general);
border-width: 20px;
border-style: solid;
border-image-source: url('https://i.imgur.com/WWCGIdJ.png');
border-image-slice: 40%;
border-image-repeat: stretch;
transition: font-size 0.3s ease;
box-shadow: none;
width: 250px;
height: 100%;
}
The full code, including a breakdown and the Blogger XML file, is freely available here:
👉 https://github.com/WearYourDictionary/wear-your-dictionary-blogger-theme