Question 389993 in Html Question posted in
Some basic documentation can be found here.

Html – How to add border colors on background with the current radial-gradient shape?

I am struggling to bring the border colour to the background using a radial gradient shape for a few days. The link I refer to below link to achieve the curve shape concept

https://css-tricks.com/cut-corners-using-css-mask-and-clip-path-properties/

The issue here is that when I curve, it works fine, but when I add a border to the overall, it always becomes a box and does not pick up with the curve. The code I have tried is using

psuedo before after concept, border with inset, radius etc, background colour linear gradient

enter image description here

.box {
  width:300px;
  aspect-ratio:1.5;
  background:
    radial-gradient(circle 30px at top    left ,#0000 98%,red  ) top    left,
    radial-gradient(circle 30px at top    right,#0000 98%,blue ) top    right,
    radial-gradient(circle 30px at bottom left ,#0000 98%,green) bottom left,
    radial-gradient(circle 30px at bottom right,#0000 98%,purple) bottom right;
  background-size:51% 51%;
  background-repeat:no-repeat;
}
<div class="box"></div>

Any help will be appreciated. Thanks

Tags:

2

Answers


  1. 0

    Fast decision. However, it can be done better.

    .box {
  width: 300px;
  aspect-ratio: 1.5;
  background: radial-gradient(circle 30px at top left, #0000 98%, red) top left, radial-gradient(circle 30px at top right, #0000 98%, blue) top right, radial-gradient(circle 30px at bottom left, #0000 98%, green) bottom left, radial-gradient(circle 30px at bottom right, #0000 98%, purple) bottom right;
  background-size: 51% 51%;
  background-repeat: no-repeat;
  position: relative;
}

.box:after {
  content: '';
  z-index: -1;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 30px at top left, #0000 98%, #DFB44F) top left, radial-gradient(circle 30px at top right, #0000 98%, #DFB44F) top right, radial-gradient(circle 30px at bottom left, #0000 98%, #DFB44F) bottom left, radial-gradient(circle 30px at bottom right, #0000 98%, #DFB44F) bottom right;
  background-size: 51% 51%;
  background-repeat: no-repeat;
  transform: scale(102%, 103%);
}
    <div class="box"></div>
    Login or Signup to reply.
  2. 0

    Adding border radius wont work , because it will add border to the div box model.
    You can create a border effect by adding pseudo element before or after and apply the same background to it and change the div background colors to black and align – items and justify-content to make the pseudo background centered inside of the div background and make div width and height bigger than pseudo element so you see the border, how big you want the border depends on you so you can change the width and height of div according to you.

    .box {
  width:310px;
  height: 310px;
  background:
    radial-gradient(circle 32px at top    left ,#0000 98%,black ) top    left,
    radial-gradient(circle 32px at top    right,#0000 98%,black ) top    right,
    radial-gradient(circle 32px at bottom left ,#0000 98%,black) bottom left,
    radial-gradient(circle 32px at bottom right,#0000 98%,black) bottom right;
  background-size:51% 51%;
  background-repeat:no-repeat;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
.box:before{
  content: '';
 position: absolute;
   width: 300px;
  height: 300px;
  background:
    radial-gradient(circle 30px at top    left ,#0000 98%,red ) top    left,
    radial-gradient(circle 30px at top    right,#0000 98%,blue ) top    right,
    radial-gradient(circle 30px at bottom left ,#0000 98%,green) bottom left,
    radial-gradient(circle 30px at bottom right,#0000 98%,purple) bottom right;
    background-size:51% 51%;
  background-repeat:no-repeat;
}
    <div class="box"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search