Im not sure will this fit for you, but if you need slightly seen radiuses roundings on checkboxes, use the next workaround:

input[type="checkbox"].is-invalid {
  outline: auto;
  outline-color: red;
}

the result is following:

but dont simplify it to

outline-color: red solid 1px;

because the outline gonna have sharp angles

尝试使用填充和边框的背景色，然后使用边框作为轮廓：

.round_outline {
  padding: 8px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
}

就我而言。

clip-path: circle(100px at center);

实际上，这将使可单击的仅是圆形，而边框半径仍是一个正方形，但看起来像是圆形。

我喜欢这样

.circle:before {
   content: "";
   width: 14px;
   height: 14px;
   border: 3px solid #fff;
   background-color: #ced4da;
   border-radius: 7px;
   display: inline-block;
   margin-bottom: -2px;
   margin-right: 7px;
   box-shadow: 0px 0px 0px 1px #ced4da;
}

它将创建带有机智边框的灰色圆圈，并再次围绕边框1px！

我只是将轮廓设置为透明。

input[type=text] {
  outline: rgba(0, 0, 0, 0);
  border-radius: 10px;
}

input[type=text]:focus {    
  border-color: #0079ff;
}

组合框阴影和轮廓。

我发现Lea Hayes的答案有些许误解

input[type=text]:focus {
    box-shadow: 0 0 0 1pt red;
    outline-width: 1px;
    outline-color: red;
}

获得非常好的清洁效果。使用边框半径时不会出现大小变化

否。边框位于元素的外部和框模型边缘区域的内部。轮廓线位于元素的内部，而框模型的填充区域将忽略它。它不是出于美学目的。只是为了向设计师显示元素的轮廓。例如，在开发html文档的早期阶段，开发人员可能需要快速辨别他们是否将所有骨骼div放置在正确的位置。稍后，他们可能需要检查各种按钮和表格是否彼此分开的像素数正确。

边界本质上是美学。与轮廓不同，它们实际上是框模型的一部分，这意味着它们不会与设置为margin：0;的文本重叠。边框的每一侧都可以单独设置样式。

如果您尝试将拐角半径应用于轮廓，我假设您以大多数人使用边框的方式使用它。因此，如果您不介意我问，轮廓的什么属性使它比边框更可取？

通过将outline-style: auto其设置在WebKits雷达上，我们可能会很快看到我们的愿望：http ://trac.webkit.org/changeset/198062/webkit

见2030年。

如果您只需要没有边框的轮廓，则有解决方案。不是我的。我是从Bootstrap CSS文件中获得的。如果指定outline: 1px auto certain_color，则会在某些颜色的div周围获得细外线。在这种情况下，即使您指定10 px宽度，指定的宽度也没有关系，无论如何它将是细线。提到的规则中的关键词是“自动”。
如果您需要带有圆角和一定宽度的轮廓，则可以在边框上添加具有所需宽度和相同颜色的css规则。它使轮廓更粗。

我刚刚找到了一个很好的解决方案，在查看了到目前为止的所有答复之后，我还没有看到它的发布。所以，这就是我所做的：

我为该类创建了CSS规则，并为该规则使用了伪类：focus。我设置outline: none为摆脱Chrome默认使用的默认的浅蓝色的不可边界半径的“轮廓”。然后，在该:focus轮廓不再存在的同一个伪类中，我添加了我的radius和border属性。导致以下

outline: none;
border-radius: 5px;
border: 2px solid maroon;

具有带有边框半径的栗色轮廓，该边框现在在用户通过Tab键选择元素时出现。

我知道他是什么意思

如果要获得浮雕外观，可以执行以下操作：

.embossed {
  background: #e5e5e5;
  height: 100px;
  width: 200px;
  border: #FFFFFF solid 1px;
  outline: #d0d0d0 solid 1px;
  margin: 15px;
}

.border-radius {
  border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
}

.outline-radius {
  -moz-outline-radius: 21px;
}

<div class="embossed"></div>
<div class="embossed border-radius"></div>
<div class="embossed border-radius outline-radius">-MOZ ONLY</div>

他正在寻找一种在其他浏览器中进行这项工作的方法。.我没有找到任何解决方法，但是其他人有什么吗？

编辑：您可以执行此操作的唯一其他方法是使用框阴影，但是如果您在该元素上已经具有框阴影，则此方法将无法工作。

我通常使用：after伪元素来完成此操作：

当然，这取决于用法，此方法允许控制各个边界，而不是使用硬阴影方法。

您还可以设置-1px偏移量，并再次使用背景线性渐变（无边框）以获得不同的效果。

body {
  margin: 20px;
}

a {
  background: #999;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  position: relative;
  border: 2px solid #000;
}

a:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 5px;
  border: 2px solid #ccc;
}

<a href="#">Button</a>

我希望Bootstrap导航栏中的下拉菜单具有很好的焦点可访问性，对此我感到非常满意：

     a.dropdown-toggle:focus {
         display: inline-block;
         box-shadow: 0 0 0 2px #88b8ff;
         border-radius: 2px;
     }

<a href="https://stackoverflow.com" class="dropdown-toggle">Visit Stackoverflow</a>

与上面的Lea Hayes相似，但是这是我的做法：

div {
  background: #999;
  height: 100px;
  width: 200px;
  border: #999 solid 1px;
  border-radius: 10px;
  margin: 15px;
  box-shadow: 0px 0px 0px 1px #fff inset;
}

<div></div>

无需嵌套DIV或jQuery，为简洁起见，我省略了一些CSS的-moz和-webkit变体。您可以在上面看到结果

现在是个老问题，但这可能与遇到类似问题的人有关。我有一个带有圆形的输入字段，border想要更改焦点轮廓的颜色。我无法驯服outline输入控件的恐怖广场。

So instead, I used box-shadow. I actually preferred the smooth look of the shadow, but the shadow can be hardened to simulate a rounded outline:

 /* Smooth outline with box-shadow: */
    .text1:focus {
        box-shadow: 0 0 3pt 2pt red;
    }

    /* Hard "outline" with box-shadow: */
    .text2:focus {
        box-shadow: 0 0 0 2pt red;
    }

<input type=text class="text1"> 
<br>
<br>
<br>
<br>
<input type=text class="text2">