Remove default border line of a div

Question

I'm doing some shapes in react with CSS, in particular, a ring with a big border and I found a annoying issue in it: a default borderline the circle I made. I tried with "outline: none" or "border: none", but I need a border. I don't know if is a browser issue o what.

This is my React component:

export default function Ring(props) {
 return <div className={`ring ${props.size} ${props.color}`}></div>;
}

And here my styles for it:

.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;
  }
}

How can I remove this?

Answer 1

The border you are seeing is driven by the default focus that is being highlighted by the browser by the outline styling. You can add a CSS rule of outline:none; to remove this focus behavior, your border will still maintain but you wouldn't have the blue outline and the element would no longer trap focus with the blue border.