CSS Gradient Borders

Click-to-Copy Modern Border Styles

Click any style's info bar to copy the full CSS rule to your clipboard.

1
Rounded (background-clip)
2
Sharp (border-image)
3
Animated (conic)
4
Circular (background-clip)
5
Minty Fresh (border-image)
6
Blue Skies (background-clip)

A Guide to Modern CSS Gradient Borders

Move beyond plain, solid lines and elevate your designs with vibrant gradient borders. While CSS doesn't have a direct `border-gradient` property, there are powerful, modern techniques to achieve this effect. This guide explores the most effective methods that offer great browser support and creative flexibility, all without complex workarounds.

What You'll Learn:

  • Two Core Techniques: Understand the `border-image` property and the more versatile `background-clip` method.
  • Rounded vs. Sharp Corners: Learn which method to choose if your design requires a `border-radius`.
  • Animated Borders: See how to create eye-catching animated gradients using CSS Custom Properties and `@keyframes`.
  • Click-to-Copy: Instantly grab the complete CSS for any style showcased here to use directly in your projects.

How to Create Gradient Borders in CSS

There are two primary, well-supported methods for creating gradient borders. The one you choose depends on a key factor: do you need rounded corners?

Method 1: `border-image`

The `border-image` property allows you to use a gradient as the source for an element's border. You must first declare a transparent border, and then apply the gradient. The `border-image-slice` property, set to `1`, tells the browser to use the entire gradient as a single asset for the border. This method is excellent for sharp, 90-degree corners and is the foundation for the animated conic gradient effect.

Method 2: `background-clip` (The Most Flexible)

This is the most popular and versatile technique because it fully supports `border-radius`. It works by layering two backgrounds on the same element:

The bottom layer is your desired gradient, set with `background-clip: border-box`, which makes it extend to the outer edge of the border. The top layer is a solid color (usually matching your page background), set with `background-clip: padding-box`, which clips it to the inside of the border. This hides the center of the gradient, revealing it only in the transparent border area.

This method is the go-to choice for modern web design due to its flexibility and compatibility with other CSS properties.

Frontend Hack

© Copyright 2025 all rights reserved | Design By Frontend-Hack