https://github.com/georgewpark/css-gradient-rounded-borders

This project demonstrates a simple method of applying a CSS gradient to a rounded border using background-clip, providing a solution to the problem where border-radius alone won't create rounded corners when a gradient is applied using border-image.
https://github.com/georgewpark/css-gradient-rounded-borders

border border-radius css css-gradients design rounded-corners

Last synced: about 1 year ago
JSON representation

This project demonstrates a simple method of applying a CSS gradient to a rounded border using background-clip, providing a solution to the problem where border-radius alone won't create rounded corners when a gradient is applied using border-image.

• Host: GitHub
• URL: https://github.com/georgewpark/css-gradient-rounded-borders
• Owner: georgewpark
• License: mit
• Created: 2018-08-16T15:43:46.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-20T15:50:50.000Z (over 7 years ago)
• Last Synced: 2025-01-15T11:12:32.910Z (over 1 year ago)
• Topics: border, border-radius, css, css-gradients, design, rounded-corners
• Language: CSS
• Homepage: https://cdpn.io/EEGJEj
• Size: 19.5 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

          
# CSS Gradient Rounded Borders

This project demonstrates a simple method of applying a CSS gradient to a rounded border using background-clip, providing a solution to the problem where border-radius alone won't create rounded corners when a gradient is applied using border-image.

![CSS Gradient Rounded Borders Demo](demo-image.JPG "CSS Gradient Rounded Borders Demo")

## Live Demo

A live demo is available on [CodePen](https://codepen.io/GeorgePark/pen/EEGJEj).

## License

This project is licensed under the MIT License - see the [license.md](license.md) file for details.