Go to homepage

Projects /

June 3, 2021

Gradient Borders

By CodyHouse
404 HTML, CSS, JS components. Download →

How to create gradient borders in CSS.

To apply a gradient to a border, the most straightforward approach is to use the border-image property (similarly to how it's done with background gradients):

.btn-gradient-1 {
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;

The '1' after the linear-gradient declaration is the border-image-slice value. By using 1, we specify we want a single border region.

The downside of this approach is that you can't combine border-image with border-radius. 🤷‍♂️

.btn-gradient-1 {
  /* .. */
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
  border-radius: 50em; /* 👈 not working */

🧐 Need inspiration for your upcoming button components? Explore our gallery of button effects or browse the entire component library for more design ideas.

Alternative approach #

There's an alternative approach, based on the background-clip property, that is compatible with the border-radius property.

.btn-gradient-2 {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, darkblue, darkorchid) border-box;
  border-radius: 50em;
  border: 4px solid transparent;

The 'padding-box' and 'border-box' values specified after the linear gradients represent the background-clip values.

The first linear gradient is limited to the padding box (i.e., all the content of the element, except the borders). It's a 'fake' gradient because we're using the same color twice; we're using it to mask the second background gradient with the background color.

The second gradient sits below the first one and is used to apply the desired gradient colors. Unlike the first one, the second gradient covers the border area (background-clip: border-box).

Finally, the transparent border is required to separate the border-box from the padding box (otherwise they would be identical and the first gradient would completely cover the second one).

Demo #

Here's a demo of both approaches:

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.