heading and page border
/* Dark background to make the banner pop */
body {
background-color: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: sans-serif;
}
/* Base wrapper to handle the outer glow/shadows */
.banner-wrapper {
position: relative;
padding: 20px;
}
/* Main Banner Body */
.banner-container {
position: relative;
width: 600px;
height: 220px;
background: radial-gradient(circle, #9e2a2b 0%, #6e1a1b 70%, #4a1011 100%);
border: 4px solid #dfb76c;
border-radius: 40px;
box-shadow:
0 0 20px rgba(223, 183, 108, 0.3), /* Subtle gold outer glow */
inset 0 0 15px rgba(0, 0, 0, 0.6); /* Inner depth shadow */
overflow: visible; /* Allows the ornate corners to blend outside */
}
/* Shared Ornate Corner Styling */
.corner {
position: absolute;
width: 50px;
height: 50px;
background: radial-gradient(circle, #9e2a2b 0%, #541314 100%);
border: 4px solid #dfb76c;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 1;
}
/* Positioning for the scalloped look */
.top-left {
top: -15px;
left: -15px;
border-bottom-color: transparent;
border-right-color: transparent;
}
.top-right {
top: -15px;
right: -15px;
border-bottom-color: transparent;
border-left-color: transparent;
}
.bottom-left {
bottom: -15px;
left: -15px;
border-top-color: transparent;
border-right-color: transparent;
}
.bottom-right {
bottom: -15px;
right: -15px;
border-top-color: transparent;
border-left-color: transparent;
}
/* Content layer inside the banner */
.banner-content {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
body {
background-color: #fdfbf7; /* Off-white/cream background to match the aesthetic */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.vintage-frame {
width: 450px;
height: 600px;
box-sizing: border-box;
padding: 40px;
/* Define the width of the ornate border border */
border: 45px solid transparent;
/* Using an SVG data URI to inject the decorative corners and edges */
border-image-source: url("data:image/svg+xml;utf8,");
/* Tells CSS how to slice the SVG: 45px for top, right, bottom, left corners */
border-image-slice: 45;
border-image-repeat: repeat;
background-color: #ffffff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.frame-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
font-family: 'Georgia', serif;
color: #4a3b2c;
}
.frame-content h1 {
font-size: 2rem;
margin-bottom: 10px;
font-weight: 400;
letter-spacing: 2px;
}
.frame-content p {
font-size: 1rem;
line-height: 1.6;
font-style: italic;
}
border-image-source: url('your-vintage-border.svg');
border-image-slice: 120; /* Adjust slice value based on image resolution */
Your Title Here
Add your elegant text or content inside this classic vintage border.