border-radius anti-alias smooth safari mask gpu image thumbnails with rounded corners card containers with overflow hidden any element with border-radius + transform Safari renders jagged border-radius edges overflow hidden + transform causes edge artifacts need smooth anti-aliased rounded corners
Border Radius Smooth
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/border-radius-smooth.json Preview
Background
Customize
Quick Start
<div class="border-radius-smooth"><img src="..." alt="..."></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 207 bytes · 6 lines
- Custom Properties
-
--smooth-radius - Classes
-
.border-radius-smooth
border-radius anti-alias smooth safari mask gpu
Forces GPU-composited rendering of border-radius via mask-image: radial-gradient(), preventing Safari’s sub-pixel jagged edges. Essential when combining border-radius with overflow: hidden and CSS transforms.
Image container
<div class="border-radius-smooth overflow-hidden">
<img src="/placeholder.svg" alt="Project" class="h-48 w-full object-cover transition-transform hover:scale-105">
</div>