You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
981 B
27 lines
981 B
6 years ago
|
# 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)
|