So I am trying to create a checkbox that looks like this:

[![enter image description here](https://i.stack.imgur.com/9ps5C.jpg)](https://i.stack.imgur.com/9ps5C.jpg)

And my checkbox currently looks like this:

[![enter image description here](https://i.stack.imgur.com/vBWEG.png)](https://i.stack.imgur.com/vBWEG.png)

This is the code for my Custom Checkbox:

```
const CustomCheckBox = ({ name = "" }) => {
  return (
    <input
      type="checkbox"
      name={name}
      style={{
        cursor: "pointer",
        width: "20px",
        height: "20px",
      }}
    />
  );
};

```

I tried using `border:"1px solid #9e9e9e", borderRadius:"3px"` but this changed nothing. So I tried using `outline: "1px solid #9e9e9e"` but now the checkbox looks like 4 dots connected and the border does not have a radius

[![enter image description here](https://i.stack.imgur.com/3evKA.png)](https://i.stack.imgur.com/3evKA.png)

How can I make the Outline/border wider without it overlapping like it is doing at the moment?

I saw someone suggested using box-shadow as a workaround in a similar question but I got the same result.

I tried using `border:"none"` to hide the inner border but it also did not work.