How do the Outline of the buttons follow the curvature of the elements?

Question

How do the Outline of the buttons follow the curvature of the elements?

Navigation

#1 by (8 votes)

8

I know that outline is very important for usability and especially for the accessibility of the page, even here is a very interesting WebAIM article about it: link

However, outline does not seem to match the border-radius of elements. In the case of this button for example, see that outline does not accompany curvature of the element, causing an undesirable effect ...

Howcanwetreatthistypeofcaseinthemostcorrectway,Isay,whatisthebestpracticeforthistypeofproblem?What"palliative" can we use without compromising accessibility and usability?

button {
  width: 100px;
  height: 50px;
  border: 0;
  border-radius: 25px;
}

<button type="submit">Button</button>

html html5 css css3 acessibilidade

asked by anonymous 18.10.2018 / 15:55

1 answer

How to apply the IF ELSE condition to the selection of a column? Handle 1-pixel border to avoid double edge (1 + 1 pixel) with side-by-side elements

score 8 · Accepted Answer

Firefox has -moz-outline-radius property, however will not work in most browsers

One solution would be to disable outline and create one with :focus

button {
  width: 100px;
  height: 50px;
  border: 0;
  outline: none;
  border-radius: 25px;
}
button#ex1:focus {
  box-shadow: 0 0 0 3px lightblue;
}
button#ex2:focus {
  border: 3px solid lightblue;
}

<button id="ex1">Button</button>
<button id="ex2">Button</button>

An important information on the use of border property to simulate outline is that there is a change in the size of the elements, for example:

button {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 0;
  outline: none;
  border-radius: 25px;
}
button:focus {
  border: 25px solid lightblue;
}

<button>Button</button>
<button>Button</button>
<button>Button</button>
<br>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<br>
<button>Button</button>
<button>Button</button>
<button>Button</button>

As the author of the question commented in the chat:

"If you go to the page of google.com you will see that it uses the technique that you used in the response;)

"Taking away this seems like border-radius + box-shadow consumes a lot of rendering feature, especially when animated!"

"However, BS4 itself uses box-shadow to handle this outline"

"... BS even changes color to match btn" / em>