0

im trying to make react js component called "GBorder" which provide gradient border for the child element but the problem is when the child have border radius something like 100px the GBorder will not have a border radius of 100px without knowing before hand that the child have 100px of border radius enter image description here as you see in this pic the aqua color circle is the child element with border radius the parent element which is the gray color don't perfectly wrap the child element, i want a solution without using javascript just css

i did tried multiple css border tricks and i did search on stackoverflow for solution with no luck

react expert
  • 1
  • Have you tried using `overflow: hidden;` on the parent element? Like described in this stackoverflow question: https://stackoverflow.com/questions/3714862/forcing-child-to-obey-parents-curved-borders-in-css – Jeremy Dec 15 '22 at 07:34
  • @jeremy yes i know this solution but not for my problem its for the opposite case when the border radius is set on the parent not the child, any way thanks for trying to help – react expert Dec 15 '22 at 19:14
  • Please provide enough code so others can better understand or reproduce the problem. – Community Dec 25 '22 at 15:22

0 Answers0