Round border appear after click button

Question

I trying to make a border appear around the circle button after clicking but the border is a rounded square instead of a circle.

.dot {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  border: none;
}

.dot:after {
  border: solid 1px #232323;
  border-radius: 50%;
}

user_1650337 · Answer

You should use the :focus selector instead of :after, and need to hide the default outline property to make your alternative focus style (using a border) visible.

(You also don't need to re-set the border-radius property, since it hasn't changed)

To avoid the button jumping when focused, you can use a transparent border on your initial button style, see the CSS comment in the example.

.dot {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  /* 
    Using an transparent border, rather than no border,
    will prevent the focus style from causing the button to 
    jump down by the border thickness (1px in this case) 
  */
  border: solid 1px rgba(0,0,0,0);
}

.dot:focus {
  border-color: #232323;
  outline: none;
}

Round border appear after click button

1 Answers