https://github.com/miguelitodev/border-generator

The border-radius property can have multiple values changed. Preview how the shape looks while changing these values.
https://github.com/miguelitodev/border-generator

border-radius border-radius-previewer css generator html html5 javascript

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/miguelitodev/border-generator
• Owner: miguelitodev
• Created: 2021-02-20T22:03:00.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-02-20T22:18:11.000Z (over 3 years ago)
• Last Synced: 2023-10-31T23:27:24.152Z (about 1 year ago)
• Topics: border-radius, border-radius-previewer, css, generator, html, html5, javascript
• Language: HTML
• Homepage: https://miguelrisquelme.github.io/border-generator/
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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