Performance: Border radius
LOW IMPACT
Border radius affects the paint and composite stages of page rendering, influencing how quickly rounded corners appear on screen.
0
0
Border radius in CSS - Performance & Optimization
Applying rounded corners to UI elements efficiently
CSS
border-radius: 0.5rem; box-shadow: none;
Simpler border-radius with no shadows reduces paint complexity and GPU compositing.
📈 Performance Gainsingle paint and composite layer, less GPU usage
Applying rounded corners to UI elements efficiently
CSS
border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.5);
Using large border-radius with complex shadows causes extra paint and composite layers, increasing GPU work.
📉 Performance Costtriggers multiple paint and composite layers, increasing GPU load
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| border-radius: 0.5rem; | none | none | low paint cost | [OK] Good |
| border-radius: 50% with box-shadow | none | none | high paint and composite cost | [X] Bad |
Rendering Pipeline
Border radius affects the Style Calculation stage by adding rounded corner styles, then triggers Layout if size changes, followed by Paint to draw the curves, and Composite to layer the element on screen.
→Style Calculation
→Layout
→Paint
→Composite
⚠️ BottleneckPaint and Composite stages are most expensive due to GPU work for rounded corners.
Core Web Vital Affected
CLS
Border radius affects the paint and composite stages of page rendering, influencing how quickly rounded corners appear on screen.
Optimization Tips
1Avoid combining large border-radius with heavy shadows or filters.
2Use moderate border-radius values to keep paint cost low.
3Check paint and composite times in DevTools to monitor impact.
Performance Quiz - 3 Questions
Test your performance knowledge
Which CSS property combined with border-radius can increase paint and composite cost significantly?
DevTools: Performance
How to check: Record a performance profile while interacting with elements using border-radius. Look for paint and composite events in the flame chart.
What to look for: High paint or composite times indicate costly border-radius usage combined with shadows or filters.