parent
23133abd9d
commit
7632964de8
@ -0,0 +1,26 @@
|
||||
# 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)
|
Loading…
Reference in new issue