block-focus-ring-with-border-radius.html

<!DOCTYPE html>
<style>
div {
  display: inline-block;
  width: 100px;
  height: 50px;
  outline: auto;
  margin: 20px;
  border: 10px solid green;
}
</style>
<div style="border-radius: 10px; outline-offset: -5px"></div>
<div style="border-radius: 10px"></div>
<div style="border-radius: 10px; outline-offset: 5px"></div>
<br>
<div style="border-radius: 40px; outline-offset: -5px"></div>
<div style="border-radius: 40px"></div>
<div style="border-radius: 40px; outline-offset: 5px"></div>
<br>
<div style="border-radius: 40px / 20px 30px; outline-offset: -5px"></div>
<div style="border-radius: 40px / 20px 30px"></div>
<div style="border-radius: 40px / 20px 30px; outline-offset: 5px"></div>

chromium/third_party/blink/web_tests/fast/css/block-focus-ring-with-border-radius.html