Dublin Library

The Publishing Project

Using Gradients with border-image

  • 3 min. read

 

Thanks to Kevin Powell and his video for showing me how to do a trick that has always intrigued me.

The idea is that we have a border color that fades to transparent or invisible.

This will take two items:

Setup #

the HTML we will use looks like this

<div class="container">
  <div class="row">
    <div class="item">
      <h2>Item Title</h2>

      <p>item content</p>
    </div>
    <div class="item">
      <h2>Item Title</h2>

      <p>Item content</p>
    </div>
    <div class="item">
      <h2>Item Title</h2>

      <p>item content</p>
    </div>
  </div>

We will also add some CSS to make make the row-based flex layout:

.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 property to set the image to a linear gradient
    • gradients can be used everywhere an image can
  3. Use the border-image-slice method to make sure the image will appear in full. Otherwise, the image will only appear in the corners
.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