-1

Hi i need to know how to turn this square to rounded edges radius 50px

body {
  background-color: #241d33;
}

.rainbow-box {
  background-color: #302244;
  border: 5px solid transparent;
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
  height: 200px;
  margin: 20px auto;
  width: 200px;
}
<div class="rainbow-box"></div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
kamal issa
  • 7
  • 2
  • Do refer https://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient – p2pdops Jun 20 '21 at 14:44

1 Answers1

0

You can use 2 gradients and background-clip:

possible example:

body {
--border:25px;
  margin: 0;
  min-height: 100vh;
  background: url(https://picsum.photos/id/1051/800/300) 0 0 / cover ;
}
body, .rainbow-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rainbow-box {
  border: var(--border) solid transparent;
  background: linear-gradient(#fff, #fff), linear-gradient( to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%) center center /calc(100% + (var(--border) * 2)) calc(100% + (var(--border) * 2));
  background-clip: content-box, border-box;
  border-radius: 25%;
  height: 200px;
  margin: 20px auto;
  width: 200px;

  mix-blend-mode: multiply;
}
<div class="rainbow-box">
  <p>HELLO</p>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Ok well everything is great and all, thanks a lot, but one last thing I'm trying to make it so inside of it is transparent as well, any idea how? – kamal issa Jun 21 '21 at 14:29
  • @kamalissa that was not specified in your question (i guess duplicates are not duplicates anymore, is it ?), You could try mix-blend-mode : https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode **snippet updated to demonstrate the idea.** Added also a CSS var() to easily test borders size. – G-Cyrillus Jun 21 '21 at 20:15