CSS border gradient processing rounded corner solution

CSS border gradient processing rounded corner solution

Using the CSS border gradient property, you can achieve border gradient without rounded corners:

.box{
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(0deg.#79c8ff 1%.#dc4f97 31%.#f85658 46%.#ff7b4f 70%.#ffa469 100%);
  border-image-slice: 1;
}
Copy the code

But if you want rounded corners, the above code won’t do it. You can’t set the rounded corners by setting boreder-radius, even if you add boreder-radius.

Thus, a compromise scheme was adopted. Add one more layer of elements

1. Add padding to the outer element. The padding value should be the size required for the border.

2. Give the outer elements a gradient background.

Case code

<div class="box">
	<div class="content"></div>
</div>
Copy the code

.box{
    padding: 1px;
    background-image: linear-gradient(0deg.#79c8ff 1%.#dc4f97 31%.#f85658 46%.#ff7b4f 70%.#ffa469 100%);
    border-radius: 4px;
   box-sizing: border-box;
   overflow: hidden;
}
.content{
   	height: 200px;
  	background-color: #1d3d8e;
    border-radius: 4px;
  	box-sizing: border-box;
    overflow: hidden;
}
Copy the code

Implementation style: