Border Radius Comparison: %, px, calc(% + px)

Percentage Base: 20% (Affects % and Calc sections)

Pixel Base: 6px (Affects px and Calc sections)

1. Percentage Radius (`border-radius: %`)

Radius based on element dimensions. Controlled by Percentage slider.

Outer Box 1 (Wider)

Outer Box 2 (Column)

Nested Box 2.1

Nested Box 2.2 (Column)

Double Nested 2.2.1

Double Nested 2.2.2

Outer Box 3

Standalone div

2. Pixel Radius (`border-radius: px`)

Fixed radius, circular corners. Controlled by Pixel slider.

Outer Box 1 (Wider)

Outer Box 2 (Column)

Nested Box 2.1

Nested Box 2.2 (Column)

Double Nested 2.2.1

Double Nested 2.2.2

Outer Box 3

Standalone div

3. Calculated Radius (`border-radius: calc(% + px)`)

Combines percentage and pixel values. Controlled by both sliders.

Outer Box 1 (Wider)

Outer Box 2 (Column)

Nested Box 2.1

Nested Box 2.2 (Column)

Double Nested 2.2.1

Double Nested 2.2.2

Outer Box 3

Standalone div