Creating border linear gradient

Question

I need create such border with a linear gradient as on a picture

I generate such linear gradient

background-image: linear-gradient(135deg, #d63286 12.50%, #ffffff 12.50%, #ffffff 25%, #ebb7b7 25%, #ebb7b7 37.50%, #fff 37.50%, #fff 50%, #d63286 50%, #d63286 62.50%, #ffffff 62.50%, #ffffff 75%, #ebb7b7 75%, #ebb7b7 87.50%, #fff 87.50%, #fff 100%);
background-size: 84.85px 84.85px;

Now how can I apply it to div block?

border-image-source with this gradient gives wrong result.

score 1 · Accepted Answer · answered Oct 15 '20 at 19:40

Can use a background on a child div:

.custom-border {
  background-image: linear-gradient(135deg, #d63286 12.50%, #ffffff 12.50%, #ffffff 25%, #ebb7b7 25%, #ebb7b7 37.50%, #fff 37.50%, #fff 50%, #d63286 50%, #d63286 62.50%, #ffffff 62.50%, #ffffff 75%, #ebb7b7 75%, #ebb7b7 87.50%, #fff 87.50%, #fff 100%);
  background-size: 84.85px 84.85px;
  padding: 10px;
}

.custom-border>div {
  background: #fffdee;
  padding: 5px;
}

<div class="custom-border">
  <div>test</div>
</div>

Thank you. The problem was i missed background at child divs. But .custom-border>div doesn`t works for me. Instead .custom-border div works well — , Oct 15 '20 at 19:54

score 1 · Answer 2 · answered Oct 15 '20 at 19:52

Frame class has background gradient colour and a 10px border light pink. And the child div has a White Background for form.

.frame {
background-image: linear-gradient(135deg, #d63286 12.50%, #ffffff 12.50%, #ffffff 25%, #ebb7b7 25%, #ebb7b7 37.50%, #fff 37.50%, #fff 50%, #d63286 50%, #d63286 62.50%, #ffffff 62.50%, #ffffff 75%, #ebb7b7 75%, #ebb7b7 87.50%, #fff 87.50%, #fff 100%);
background-size: 84.85px 84.85px;
width: 300px;
height: 400px;
border: 10px solid #F5E9D9;
padding: 10px;
}
.form {
display: block;
background: #fff;
padding: 15px;
width: 100%;
height: 100%;
box-sizing: border-box;
}

<div class="frame">
<div class="form">
form
</div>
</div>

Jeffhowcodes · Answer 3 · 2020-10-15T19:53:54.617

This is how I would do it:

body{
margin:0;
}

div{
  background-color:white;
  position:relative;
  max-width:300px;
  padding:15px;
  margin:15px;
}

.cool-border::before{
  content:'';
  background-image: linear-gradient(135deg, #d63286 12.50%, #ffffff 12.50%, #ffffff 25%, #ebb7b7 25%, #ebb7b7 37.50%, #fff 37.50%, #fff 50%, #d63286 50%, #d63286 62.50%, #ffffff 62.50%, #ffffff 75%, #ebb7b7 75%, #ebb7b7 87.50%, #fff 87.50%, #fff 100%);
  background-size: 84.85px 84.85px;
  position:absolute;
  z-index:-1;
  
  /*  Adjust this for width of border  */
  left:-18px;
  top:-18px;
  right:-18px;
  bottom:-18px;
  border: #F5E9D9 solid 8px;
}

<div class="cool-border">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non diam non lacus rutrum euismod. Ut pharetra euismod lectus eget vehicula. Curabitur volutpat cursus pharetra. Quisque sed augue rutrum ipsum ultrices euismod. Praesent mi enim, mattis vitae mauris ac, rhoncus ultricies nibh. Aenean elementum aliquet risus, dictum mattis quam tristique sed. Cras ut elit magna. Proin sed euismod sapien. Pellentesque eget congue dolor, eu condimentum nulla. Ut gravida varius risus, et ullamcorper ipsum posuere et.</div>

Rounin · Answer 4 · 2020-10-15T20:16:03.977

You can (theoretically) use the

border-image

property in your CSS.

(Though I've never used it before and it appears to be less immediately intuitive than you might imagine or hope it to be...)

Working Example:

Of dubious quality - I thought this would turn out fine - and it's not terrible - but it has ended up looking more like a work in progress.

div {
  position: relative;
  width: 180px;
  height: 180px;

  background-color: rgb(255, 253, 238);
  outline: 6px solid rgb(245, 233, 217);
  
  border-width: 6px;
  border-style: solid;
  border-image: linear-gradient(135deg, #d63286 12.50%, #ffffff 12.50%, #ffffff 25%, #ebb7b7 25%, #ebb7b7 37.50%, #fff 37.50%, #fff 50%, #d63286 50%, #d63286 62.50%, #ffffff 62.50%, #ffffff 75%, #ebb7b7 75%, #ebb7b7 87.50%, #fff 87.50%, #fff 100%) 15 repeat;
  box-sizing: border-box;
}

div p {
  margin: 0;
  padding: 12px;
}

<div>
<p>Hello <code>border-image</code> property!</p>
<p>I'm delighted to pick you up off the shelf and finally give you a spin.</p>
</div>

Creating border linear gradient

4 Answers4

Further Reading