```
We will also add some CSS to make make the row-based flex layout:
```css
.row {
display: flex;
gap: 2em;
justify-content: space-evenly;
padding: 2em;
}
```
### Creating the effect
With all the setup we did, creating the effect is fairly straightforward.
We want the top and left border to start with a solid color and become invisible before the end of the border. The code does the following:
1. Defines the borders we want to work with using logical properties
* In English and other Western languages, `block-start` is top and `inline-start` is right
2. Use the [border image](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source) property to set the image to a [linear gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)
* gradients can be used everywhere an image can
3. Use the [border-image-slice](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice) method to make sure the image will appear in full. Otherwise, the image will only appear in the corners
```css
.item {
/* 1 */
padding: 1em;
border-block-start: 5px solid;
border-inline-start: 5px solid;
/* 2 */
border-image-source: linear-gradient(45deg, rebeccapurple, transparent 75%);
/* 3 */
border-image-slice: 1;
}
```
The code produces the following result:
Edit on Github
