CSS Snippet:
Border Accent Container
This CSS snippet creates a clean container with a subtle left border accent to add visual hierarchy without heavy styling. The accent line draws attention while keeping the overall design minimal and professional.
It’s a simple way to introduce structure and emphasis in modern layouts.
Difficulty:
Easy
Live preview
Border Accent
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use case
Use this container when you want to highlight specific content without relying on strong colours or large visual elements.
It works particularly well for sections that need subtle emphasis or separation.
Where to apply it
Apply this class to containers that need a bit of visual hierarchy or emphasis.
Common examples include:
• Feature highlights
• Key information blocks
• Callout sections
• Notes or tips
This style works well in clean, modern layouts and pairs nicely with neutral colour palettes.
Notes & Setup
Select your container in Wix Studio.
Add the class: border-accent-container
Paste the CSS into your site's Custom CSS section.
You can change the border colour to match your brand.
If you don’t want the hover effect, simply remove the :hover section from the CSS.
Licensing
This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.
Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.
Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.
CSS Code
css
.border-accent-container {
padding: 24px 28px;
border-radius: 16px;
background: #ffffff;
border-left: 4px solid #2563eb; /* change accent colour */
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.04);
transition: all 0.25s ease;
}
/* Optional hover */
.border-accent-container:hover {
transform: translateY(-2px);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.06);
}
