# Border-radius Previewer

**Tier:** 1-Beginner

The border-radius property can have multiple values changed. Preview how the shape looks while changing these values.

## 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

## Useful links and resources

-   [CSS3 Borders](https://www.w3schools.com/css/css3_borders.asp)
-   [Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)

## Example projects

-   [9elements Fancy Border Radius](https://9elements.github.io/fancy-border-radius/)
-   [Border Radius](https://border-radius.com/)
-   [CSS Gradient Border](https://codepen.io/thebabydino/pen/zbqPVd)