Recommended Free Tools
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use border-image when you need a straightforward gradient border, and use two clipped background layers when the border must follow rounded corners. Both approaches use a CSS linear-gradient(); the difference is how the gradient is painted and clipped.
1. The simplest gradient border: border-image
A gradient is a CSS image value, so it can be used directly as the source for border-image. Give the element a nonzero border width and a border style, then provide a slice value:
.gradient-border {
border: 4px solid;
border-image: linear-gradient(90deg, #7c3aed, #06b6d4) 1;
}The 90deg angle runs from left to right. Replace it with a direction such as to bottom, or use any angle you prefer. Add more color stops when you need a multicolor transition:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →.sunset-border {
border: 5px solid;
border-image: linear-gradient(to right, #f97316, #db2777, #7c3aed) 1;
}The final 1 is the slice value. It tells the browser how to divide the gradient image for the border. Other slice values are valid; for example, MDN shows a gradient border using 60. Test the chosen value at your actual border width and element shape.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Why the border style and width matter
A border image may not render when the border style is none or the width is zero. The compact border: 4px solid declaration establishes both requirements. If you set individual sides, make sure each side intended to display the image has a visible width.
What this method does well
- It is short and easy to apply to cards, buttons and panels.
- The gradient is generated by the browser and scales with the element, so no raster asset is required.
- Changing colors, direction or stops requires editing only the gradient value.
2. Rounded gradient borders with layered backgrounds
border-image does not follow border-radius. If you apply both properties, the border image remains effectively square rather than tracing the rounded outline. For a rounded card with an opaque interior, use a transparent border and two background layers:
.rounded-gradient-border {
border: 3px solid transparent;
border-radius: 16px;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, #7c3aed, #06b6d4) border-box;
}The first background is painted on top and is clipped to the padding-box, so it fills the content and padding without covering the border area. The second layer is clipped to the border-box and supplies the gradient beneath the transparent border. The result follows the 16-pixel radius.
Free tools Windows power users keep installed
One-click scans. No signup required.
Using a dark or colored interior
Replace the first gradient with any opaque fill:
.dark-card {
border: 3px solid transparent;
border-radius: 20px;
background:
linear-gradient(#111827, #111827) padding-box,
linear-gradient(120deg, #22d3ee, #a855f7, #f472b6) border-box;
color: white;
}For a flat color, a single-color gradient keeps the syntax consistent. You can also use a subtle interior gradient as long as it remains opaque enough to hide the layer beneath it.
When the interior must stay transparent
The two-background pattern intentionally paints an opaque inner layer. It is therefore not the right choice when the element must reveal the page behind it. A transparent interior needs a different construction, such as a carefully sized pseudo-element or a masking technique. Those approaches require additional control over stacking, pointer events and the element’s background, so do not substitute the opaque example without checking the visual requirement.
3. A newer option: background-clip: border-area
Newer clipping syntax can paint a background only in the area occupied by the border:
.modern-gradient-border {
border: 3px solid transparent;
background-image: linear-gradient(135deg, #7c3aed, #06b6d4);
background-origin: border-box;
background-clip: border-area;
}
@supports not (background-clip: border-area) {
.modern-gradient-border {
border: 3px solid #7c3aed;
}
}border-area accounts for the border’s width and style. However, current documentation cautions that the newest background-clip syntax is not implemented everywhere. WebKit’s November 20, 2024 demonstration used Safari Technology Preview and included a feature query. Keep the fallback, and test the browsers you support rather than assuming universal availability.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →4. Choosing the right method
| Method | Best use | Main trade-off |
|---|---|---|
border-image: linear-gradient(...) 1 |
Simple gradient borders with square corners | border-radius does not shape the border image; width and style must be visible. |
Layered backgrounds with padding-box and border-box |
Rounded gradient borders around an opaque interior | The inner layer fills the interior, so a transparent center needs another construction. |
background-clip: border-area |
Modern direct clipping where supported | Support is not safe to assume; use @supports and a fallback. |
5. Complete examples you can copy
Responsive card component
.card {
max-width: 28rem;
padding: 1.5rem;
border: 3px solid transparent;
border-radius: 1rem;
background:
linear-gradient(#ffffff, #ffffff) padding-box,
linear-gradient(110deg, #7c3aed, #06b6d4) border-box;
box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}
.card h2 {
margin-top: 0;
}Gradient outline for a button
.gradient-button {
border: 2px solid transparent;
border-radius: 999px;
padding: .7rem 1.1rem;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(90deg, #f97316, #db2777) border-box;
color: #9d174d;
cursor: pointer;
}
.gradient-button:hover {
background:
linear-gradient(#fff7ed, #fff7ed) padding-box,
linear-gradient(90deg, #f97316, #db2777) border-box;
}Applying the pattern to an existing background
Background layers are ordered from front to back. If the component already has a background image or color, include it deliberately and assign a clip to every layer. Otherwise, adding the gradient shorthand can silently replace the existing background. Write the complete list, for example:
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
.hero-panel {
border: 4px solid transparent;
border-radius: 24px;
background:
url("hero-texture.svg") center / cover no-repeat border-box,
linear-gradient(#0f172a, #0f172a) padding-box,
linear-gradient(135deg, #38bdf8, #8b5cf6) border-box;
}Here the texture is the top layer. Check the result in the browser because a top layer that is clipped to border-box can cover the gradient beneath it.
6. Gradient controls that matter
Direction and angle
linear-gradient(to right, ...) uses a named direction. An angle such as 135deg rotates the transition; changing it to 45deg reverses the diagonal’s visual orientation.
Color stops
Stops can include positions:
.stops {
border: 4px solid;
border-image: linear-gradient(90deg, #7c3aed 0%, #06b6d4 55%, #22c55e 100%) 1;
}Percentages control where each color is reached. Closely spaced stops create a sharper transition; wider spacing creates a smoother blend.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Transparency
You can use alpha colors such as rgb(124 58 237 / 70%). Remember that the apparent result depends on what lies behind the border. For rounded cards, keep the inner padding-box layer opaque when you need a clean, predictable edge.
7. Troubleshooting
The border is invisible
- Confirm that the border width is greater than zero.
- Set a visible style such as
solid;nonecan prevent the border image from appearing. - Check that the gradient is assigned to
border-imageand includes a slice value. - Inspect whether another background or pseudo-element is covering the border.
The rounded corners look square
This is expected with border-image. Switch to the layered-background pattern, which clips the gradient to the rounded border-box.
The inside of the rounded card is transparent when it should not be
Make the first background layer an opaque color or gradient and clip it to padding-box. A transparent first layer exposes the layer beneath it.
The modern example does nothing
Your browser may not implement border-area. Keep the fallback outside the feature query, or use the established two-layer pattern. Test with browser developer tools by checking whether the declaration is crossed out or unsupported.
The gradient disappeared after adding a background
The background shorthand resets other background components. Recombine all required layers in one declaration, and remember that the first listed layer is painted on top.
Best Value
8. Performance, accessibility and maintenance
CSS gradients are generated by the browser and normally avoid downloading an image file. Keep the gradient declarations centralized in a component class or custom properties so a theme change does not require editing every rule:
:root {
--border-start: #7c3aed;
--border-end: #06b6d4;
}
.panel {
border: 3px solid transparent;
border-radius: 14px;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(90deg, var(--border-start), var(--border-end)) border-box;
}Do not use a gradient border as the only indicator of keyboard focus or an error state. Provide a clear focus outline, text label or icon with sufficient contrast. Test high-contrast modes and reduced-motion settings if you animate the gradient; a static border is the safer default.
Or skip the browser setup
If you need screenshots of pages showing these CSS borders, ScreenshotNeo can capture them with one request instead of maintaining a headless-browser script. It accepts the URL and returns a PNG, JPEG, WebP or PDF. Cookie banners, newsletter popups and chat widgets are removed before the shot; bot checks, blank pages and failed loads are not billed, and the response identifies the page verdict and billing status.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for all parameters. The same endpoint supports full-page and element captures, device and retina settings, custom CSS and JavaScript, waits, request blocking, headers, cookies, geolocation, caching, PDFs, bulk jobs and signed webhooks. Its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
9. Quick decision checklist
- Need square corners and the shortest CSS? Choose
border-image. - Need a rounded border around an opaque card? Use clipped background layers.
- Need a transparent interior? Use a pseudo-element or masking construction instead of the opaque two-layer example.
- Want
border-area? Wrap it in@supportsand provide a fallback. - Seeing no border? Verify width, style, slice and layer order.
Frequently Asked Questions
Can I animate a CSS gradient border?
Yes. Animate custom properties or the gradient itself, but provide a static focus and error indicator so meaning does not depend on motion or color alone.
Does border-image work with every border style?
Use a visible style such as solid. A zero width or none style can prevent a border image from appearing.
Which method should I use for a transparent rounded border?
The standard two-background pattern assumes an opaque inner fill. For a transparent center, use a pseudo-element or masking technique and test stacking and pointer behavior.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
