Chrome 94.0 +。

I tested it in chrome 94.0 and it seems that the outline property honors the border-radius now.

.outline { outline: 2px solid red; } .border { border: 2px solid red; } .outline-10 { border-radius: 10px; } .border-2 { border-radius: 2px; } .outline-2 { border-radius: 2px; } .border-10 { border-radius: 10px; } .outline-50 { border-radius: 50%; } .border-50 { border-radius: 50%; } .circle { display: inline-block; width:50px; height: 50px; } <strong>Test this in chrome 94.0+</strong> <br/><br/> border-radius: 2px <span class="outline outline-2">outline</span> <span class="border border-2">border</span> <br/><br/> border-radius: 10px <span class="outline outline-10">outline</span> <span class="border border-10">border</span> <br/><br/> border-radius: 50% <span class="outline outline-50">outline</span> <span class="border border-50">border</span> <span class="outline circle outline-50">outline</span> <span class="border circle border-50">border</span>

我有一个圆形边框的输入字段，想要改变焦点轮廓的颜色。我无法控制输入控件中可怕的方形轮廓。

所以我用了盒影。实际上我更喜欢阴影的平滑外观，但阴影可以被硬化以模拟圆形轮廓:

输入，输入:焦点{ 边界:没有; border - radius: 2分; Box-shadow: 0 0 0 1pt灰色; 大纲:没有; 过渡:1。; ｝ /*平滑的轮廓与盒子阴影:*/ .text1:专注{ 箱影:0 0 3pt 2pt矢车菊蓝; ｝ /*硬“轮廓”与盒子阴影:*/ .text2:专注{ 箱影:0 0 0 2pt红色; ｝ <输入class = " text1 " > < br > < br > <input type=text class="text2">

如果你想要浮雕效果，你可以这样做:

.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>

我还没有找到一个工作周围有这个工作在其他浏览器。

编辑:你能做到这一点的唯一其他方法是使用盒子阴影，但如果你已经在该元素上有一个盒子阴影，这将不起作用。

类似于上面的Lea Hayes，但我是这样做的:

div { 背景:# 999; 身高:100 px; 宽度:200 px; 边框:#999实心1px; border - radius: 10 px; 保证金:15 px; Box-shadow: 0px 0px 0px 1px #fff插入; ｝ < div > < / div >

没有必要嵌套DIVs或jQuery，尽管为了简洁起见，我省略了一些CSS的-moz和-webkit变体。你可以看到上面的结果

你可以用盒子阴影代替这样的轮廓

    box-shadow: 0 0 1px #000000;
    border-radius: 50px;
    outline: none;

(2023年2月)

据我所知，只有Firefox和Firefox for android支持Outline半径。

-moz-outline-radius: 1 em;