While working on creating shapes in React using CSS, I encountered an irritating issue with a ring design that I'm attempting to create. I can't seem to get rid of the default border around the circle shape I've created. I've tried using "outline: none" and "border: none", but I actually need a border for this design. It's puzzling whether this is a browser-specific problem or something else entirely.
Here is the React component I have been working on:
export default function Ring(props) {
return <div className={`ring ${props.size} ${props.color}`}></div>;
}
And here are the corresponding styles for my ring component:
.ring {
border-radius: 50%;
z-index: -1;
&.medium {
height: 500px;
width: 500px;
border-width: 80px;
}
&.main {
border-color: $main-color;
}
&.gray {
border-color: $soft-gray;
}
}
I would greatly appreciate any help or advice on how to resolve this issue!