How can I create a smooth gradient border around a box using pure CSS?
Asked on Sep 23, 2025
Answer
To create a smooth gradient border around a box using pure CSS, you can use the `border-image` property or a combination of `background-clip` and `linear-gradient`. Here's an example using the latter method.
<!-- BEGIN COPY / PASTE -->
<div class="gradient-border-box">
Your content here
</div>
<style>
.gradient-border-box {
padding: 20px;
border-radius: 10px;
background: linear-gradient(white, white) padding-box,
linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) border-box;
border: 5px solid transparent;
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- This example uses `linear-gradient` to create a rainbow gradient effect around the border.
- The `border-radius` property is used to round the corners of the box and the border.
- `background-clip: padding-box` ensures the inner background does not overlap the border.
- `border: 5px solid transparent` is necessary to define the border width and make the gradient visible.
Recommended Links: