How to achieve the following gradient border effect:

This problem itself is not difficult, there are some methods to implement, mainly there are some details need to pay attention to.

border-image

Border-image is a new property of the CSS wallpaper and Borders Module Level 3.

As the name implies, we can add an image to the border element, similar to background-image, which can be either a picture or a gradient, rather than just a solid color.

Use the border-image for the gradient border

With the border-image, it’s easy to implement a gradient border

The syntax of border-image will be introduced, but the reader needs to understand it by himself.

The implementation is as follows:

<div class="border-image"></div>
Copy the code
.border-image {
    width: 200px;
    height: 100px;
    border-radius: 10px;
    border-image-source: linear-gradient(45deg, gold, deeppink);
    border-image-slice: 1;
    border-image-repeat: stretch;
}
Copy the code

The above three attributes about border-image can be abbreviated as border-image: Linear-gradient (45deg, gold, deeppink) 1;

The results are as follows:

Border – the radius

Take a closer look at the Demo above, set border-radius: 10px but show no rounded corners. The biggest problem with using border-image is that the set border-radius is invalid.

We can’t get a gradient border with rounded corners. The reason, view the official specification W3C explanation is as follows:

A box’s backgrounds, but not its border-image, Are clipped to the appropriate curve (as determined by ‘background clip’). Other effects that clip to the border or Padding edge (such as’ overflow ‘other than’ visible ‘) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

To do this, we had to take a different approach or improve it a little bit and get a gradient border with rounded corners.

Method 1: background-image + pseudo-element

In the first method, instead of using border-image, we use background-image + pseudo-element scheme, which is the most common method not found in the border-image specification.

Very simple, simple schematic diagram is as follows:

Create a gradient background with background-image and create a gradient border by overlaying a white background.

CodePen Demo — bg + overflow implement gradient borders

disadvantages

There are two problems with this scheme. The first is the use of two more elements (in this case ::before and :: After, of course), and the second, most fatal, is that it doesn’t work if the background inside the border is required to be transparent.

Method 2: Use background-clip

The second method uses background-clip: content-box and background-clip: border-box.

Background-clip: Background-clip sets whether the element’s background (background image or color) extends below the border. Its partial values are similar to box-sizing. Among them,

  • background-clip: border-boxRepresents the setting backgroundbackground-imageWill extend to the border
  • background-clip: content-boxRepresents the setting backgroundbackground-imageClipped to the edge of the Content box

Set two background-images, set two background-clips, and set the border to transparent:

Core CSS:

div {
    width: 200px;
    height: 100px;
    border: solid 10px transparent;
    border-radius: 10px;
    background-image: linear-gradient(#fee, #fee),
        linear-gradient(to right, green, gold);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
Copy the code

Background-origin: border-box (clip: border-box); background-origin: border-box (clip: border-box);

CodePen Demo — Background-clip to implement gradient borders

disadvantages

Similar to the first method, if the background inside the border is required to be transparent, this solution will not work.

法 3: border-image + overflow: hidden

This method also makes sense, since the border-radius of the background-image element is invalidated. So, we just need to add a parent to it and set overflow: hidden + border-radius:

<div class="border-image-overflow"></div>
Copy the code
.border-image-pesudo {
    position: relative;
    width: 200px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
}

.border-image-pesudo::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(50%, 50%);border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
} 
Copy the code

The effect is as follows:

Of course, there is one more element implemented here. There is another way to implement this without using redundant elements:

Method 4: border-image + clip-path

The border-radius of the background-image element is invalidated. But there is another way to create rounded containers in CSS, and that is with clip-path.

Clip-path, a very interesting CSS property.

The clip-path CSS property creates a clipping area where only parts of the element can be displayed. The part inside the region is displayed, and the part outside the region is hidden. The clipping area is the path that is referenced to the embedded URL definition or the path of the external SVG.

In short, we just need to clip a rectangular container with rounded corners based on the border-image and then use clip-path:

<div class="border-image-clip-path"></div>
Copy the code
.border-image-clip-path {
    position: relative;
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0 round 10px);
}
Copy the code

Clip-path: inset(0 round 10px).

  • Clip-path: inset() is a rectangular clipping
  • Inset () can be used in a variety of ways, hereinset(0 round 10px)Implement a parent container size (perfectly fit, vertically and horizontally centered on the parent container) andborder-radius: 10pxTo crop out everything except this element.

It’s perfect and looks like this:

Rotate () : filter: hue-rotate()

You can see this example in my CSS-Inspiration:

CSS-Inspiration — Rounded gradient borders with clip-path and border-image

The last

Well, the end of this article, I hope to help you 🙂

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

For more interesting CSS effects, come here for CSS Inspiration – find inspiration for writing CSS.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.