[csswg-drafts] Proposal: border-gradient property for native gradient borders (#11974)

DylanDuff has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: border-gradient property for native gradient borders ==
# Proposal: `border-gradient` Property

## **Issue Summary**
Currently, CSS lacks a dedicated property for applying gradient borders to elements. While workarounds exist using `border-image`, `background-clip`, and pseudo-elements, they have limitations that make implementing gradient borders cumbersome and inconsistent across browsers.

This issue proposes the introduction of a `border-gradient` property to simplify applying gradients to element borders in a native and intuitive way.

---

## **Problem Statement**
Developers frequently seek to create gradient borders for UI elements, but the current methods have significant drawbacks:

1. **`border-image` is limited** – It does not support `border-radius` properly and can behave unpredictably when the border width changes.
2. **Pseudo-element workarounds (`::before`/`::after`)** – These require additional markup and complex masking techniques.
3. **Lack of direct control** – Achieving even simple gradient borders requires multiple CSS properties instead of a single, intuitive declaration.

A dedicated `border-gradient` property would improve developer experience and performance by eliminating these workarounds.

---

## **Proposed Feature**
Introduce a `border-gradient` property that allows developers to apply a gradient directly to borders, similar to how `border-color` works but supporting gradients.

### **Proposed Syntax**
```css
.element {
  border: 5px solid;
  border-gradient: linear-gradient(to right, red, blue);
}
```

### **Expected Behavior**
- **`border-gradient`** accepts any valid CSS gradient (`linear-gradient`, `radial-gradient`, `conic-gradient`).
- **It respects `border-radius`** and follows the natural curvature of rounded borders.
- **It works with `border-width`**, adapting to different border thicknesses without requiring additional properties.

---

## **Comparison with Existing Workarounds**

| Feature | `border-image` | Pseudo-elements | `border-gradient` (Proposed) |
|---------|--------------|----------------|----------------------------|
| Supports `border-radius` | No | Yes (Complex) | Yes (Native) |
| Requires extra markup | No | Yes | No |
| Works with `border-width` | No (Scaling issues) | Yes | Yes |
| Intuitive to use | No | No | Yes |

---

## **Use Cases**

1. **Designing modern UI components**  
   - Buttons, cards, and other elements often use gradient borders for a sleek appearance.

2. **Theming and branding**  
   - Websites and applications can dynamically change gradient borders to match themes without complex CSS tricks.

3. **Accessibility and visual clarity**  
   - Designers can use subtle gradient effects for better visual distinction while maintaining accessibility.

---

## **Why This Feature is Valuable**
- **Improves developer experience** – Reduces reliance on hacks and workarounds.
- **Better maintainability** – A single property simplifies styling compared to multiple CSS rules.
- **Performance benefits** – Eliminates the need for extra DOM elements or masking techniques.

---

## **Next Steps**
- Gather feedback from developers and browser vendors on feasibility.
- Discuss potential edge cases, such as handling transparency, animations, and interaction with existing border properties.
- Determine if the feature should be prototyped in Houdini before standardization.

---

## **Request for Discussion**
We would like to hear feedback from the CSS Working Group and community members on:
1. **Technical feasibility** – Are there rendering or performance concerns?
2. **Use case validation** – Are there strong industry needs for this feature?
3. **Alternative approaches** – Are there better ways to achieve gradient borders?

---

## **Related Discussions & Community Interest**
- CSS Tricks article on [Gradient Borders](https://css-tricks.com/gradient-borders-in-css/)
- Stack Overflow question: ["How to do gradient borders in CSS?"](https://stackoverflow.com/questions/2717127/how-to-do-gradient-borders-in-css)

---


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11974 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 21 March 2025 06:30:57 UTC