Border Radius Previewer

The border-radius property can have multiple values changed. Preview how the shape looks while changing these values and copy the resulting CSS to your clipboard.

This is a perfect project for learning CSS manipulation with JavaScript and understanding how the border-radius property works.

User Stories:

• User can see a box which has a border-radius property applied to it
• User can change the 4 border-radius values that are applied to the box (top-left, top-right, bottom-left, bottom-right)
• User can copy the resulting CSS to the clipboard

Bonus Features:

• User can change all 8 possible values of the border-radius in order to create a complex shape
• User can select different units (px, em, rem, %)
• User can preset common border-radius patterns
• User can generate random border-radius values
• User can save favorite combinations

What you'll learn:

• CSS border-radius property
• DOM manipulation with JavaScript
• Real-time preview updates
• Clipboard API
• Event handling
• CSS units and values