---
title: "How to Set a Gradient Border for the Section block"
source: "https://docs.nexcess.com/software/kadence/blocks/gradient-border-section-block/"
description: "To set a gradient border using CSS in WordPress, you can employ the border-image property or a more advanced technique using background-clip.Helpful resources:…"
vertical: "Software"
area: "Kadence Blocks"
date: "2025-10-09"
last_modified: "2026-07-02"
---

# How to Set a Gradient Border for the Section block

To set a gradient border using CSS in WordPress, you can employ the ***border-image*** property or a more advanced technique using background-clip.  
  
**Helpful resources:**

- [Learn how to add Custom CSS Classes and/or Anchor IDs to Kadence Blocks.](https://docs.nexcess.com/software/kadence/add-classes-and-ids-to-blocks/)
- [Learn about Applying Block-Level Custom CSS in Kadence Blocks](https://docs.nexcess.com/software/kadence/blocks/block-level-custom-css/).

Using the border-image property (***Simpler, but no border-radius***):

This approach is quick to set up and creates a clean gradient border. However, it does not support rounded corners (`border-radius`).

![](https://docs.nexcess.com/wp-content/uploads/2026/06/Gradient-rectangle-with-text-1024x165-1.png)```
.your-element-class {
  border-width: 20px; /* Adjust border thickness */
  border-style: solid;
  border-image: linear-gradient(to right, #ffafc7, #73d7ee) 1; /* Customize colors and direction */
}
```

- Replace `<mark class="has-inline-color has-theme-palette-1-color">.your-element-class</mark>` with the actual CSS class or ID of the element you want to style.
- Modify `<mark class="has-inline-color has-theme-palette-1-color">border-width</mark>` to control the border’s thickness.
- Adjust the `<mark class="has-inline-color has-theme-palette-1-color">linear-gradient</mark>` function with your desired colors and direction (e.g., `to right`, `to bottom`, `45deg`).
- The `1` after the `<mark class="has-inline-color has-theme-palette-1-color">linear-gradient</mark>` is the `<mark class="has-inline-color has-theme-palette-1-color">border-image-slice</mark>` value, indicating a single border region.

Using background-clip (***Compatible with border-radius***):

This method provides more flexibility. It allows you to use rounded corners (`border-radius`) while keeping the gradient border effect.

![](https://docs.nexcess.com/wp-content/uploads/2026/06/Background-Clip-Graphic-1024x156-1.png)```
.your-element-class {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #ffafc7, #73d7ee) border-box; /* Customize colors and direction */
  border-radius: 20px; /* Adjust border-radius as needed */
  border: 20px solid transparent; /* Adjust border thickness */
}
```

- Replace `<mark class="has-inline-color has-theme-palette-1-color">.your-element-class</mark>` with the actual CSS class or ID of the element.
- The first `<mark class="has-inline-color has-theme-palette-1-color">linear-gradient(white, white) padding-box</mark>` creates a solid white background within the padding box.
- The second `<mark class="has-inline-color has-theme-palette-1-color">linear-gradient(to right, #ffafc7, #73d7ee) border-box</mark>` creates your gradient and clips it to the border box, effectively acting as the border.
- Set `<mark class="has-inline-color has-theme-palette-1-color">border-radius</mark>` for rounded corners.
- Set `<mark class="has-inline-color has-theme-palette-1-color">border</mark>` to a transparent solid border with the desired thickness.