Use conic gradients to create a cool border

This CodePen created by Terry Mun shows how to use a conic gradient to create a border. Move your mouse over the element and you’ll see the gradient change, thanks to a little bit of JavaScript updating a CSS custom property that stores the rotation an…


This content originally appeared on web.dev and was authored by Google Developers

This CodePen created by Terry Mun shows how to use a conic gradient to create a border. Move your mouse over the element and you'll see the gradient change, thanks to a little bit of JavaScript updating a CSS custom property that stores the rotation angle.

The example uses the border-image-source property. This property sets the source image used to create an element's border. As with other properties that accept an image value, any CSS gradient type is valid too.

border-image-source #

Browser support: 15 15 12 6 Source

Conic gradient #

Browser support: 69 83 79 12.1 Source


This content originally appeared on web.dev and was authored by Google Developers


Print Share Comment Cite Upload Translate Updates
APA

Google Developers | Sciencx (2022-05-27T00:00:00+00:00) Use conic gradients to create a cool border. Retrieved from https://www.scien.cx/2022/05/27/use-conic-gradients-to-create-a-cool-border/

MLA
" » Use conic gradients to create a cool border." Google Developers | Sciencx - Friday May 27, 2022, https://www.scien.cx/2022/05/27/use-conic-gradients-to-create-a-cool-border/
HARVARD
Google Developers | Sciencx Friday May 27, 2022 » Use conic gradients to create a cool border., viewed ,<https://www.scien.cx/2022/05/27/use-conic-gradients-to-create-a-cool-border/>
VANCOUVER
Google Developers | Sciencx - » Use conic gradients to create a cool border. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/05/27/use-conic-gradients-to-create-a-cool-border/
CHICAGO
" » Use conic gradients to create a cool border." Google Developers | Sciencx - Accessed . https://www.scien.cx/2022/05/27/use-conic-gradients-to-create-a-cool-border/
IEEE
" » Use conic gradients to create a cool border." Google Developers | Sciencx [Online]. Available: https://www.scien.cx/2022/05/27/use-conic-gradients-to-create-a-cool-border/. [Accessed: ]
rf:citation
» Use conic gradients to create a cool border | Google Developers | Sciencx | https://www.scien.cx/2022/05/27/use-conic-gradients-to-create-a-cool-border/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts