An emphasis ring pricing block built with pure HTML and CSS that visually highlights a featured plan using a decorative ring or bordered accent. It draws user attention to priority pricing tiers while maintaining a clean and responsive layout structure.
Usage
Use this component when a featured pricing plan needs visual priority, such as subscription tiers, SaaS packages, service bundles, or membership options where one plan should stand out clearly from others.
Implementation
The highlight effect is created using layered borders, outline techniques, or pseudo element ring styling to form a visual emphasis around the selected pricing card. Responsive layout rules ensure proper alignment across desktop and mobile viewports.
HTML
<div class="pricing-ring">
<span class="pricing-ring__label">Pro</span>
<strong class="pricing-ring__price">$99</strong>
</div>CSS
.pricing-ring {
width: 200px;
padding: 0.85rem;
border-radius: 18px;
background: #84934A;
text-align: center;
position: relative;
color: #e5e7eb;
}
.pricing-ring::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 22px;
border: 1px solid #492828;
opacity: 0.5;
}
.pricing-ring__label {
font-size: 12px;
color: #ECECEC;
}
.pricing-ring__price {
display: block;
margin-top: 0.3rem;
font-size: 20px;
font-weight: 700;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses a ring style emphasis effect to highlight featured plans
- Maintains strong visual hierarchy between pricing tiers
- Fully responsive layout structure
- Ideal for SaaS and subscription pricing sections
- Easy to customize border thickness, color, and spacing
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.