如何实现仅具有内边界半径的粗边界答案

【问题标题】：How do I achieve a thick border with inner border radius only如何实现仅具有内边界半径的粗边界
【发布时间】：2020-02-07 10:01:52
【问题描述】：

border: 15px solid $card-border;

我希望外边界半径为无，而内边界半径有一个值（仅在内部四舍五入）。我如何做到这一点？

【问题讨论】：

这是你想要的stackoverflow.com/a/59383914/8620333 吗？

标签： css

【解决方案1】：

the simple way: you can have 2 dives 

<div class="a">
   <div class="b">
   </div>
</div>

.b{
    display: block;
    width: 50px;
    height: 50px;
    background-color: yellow;
    border-radius: 5px;
}
 .a{
    border: 15px solid;
    width: auto;
    height: auto;
    display: inline-block;
    background-color: black;
}

【讨论】：

这也是我最终做的！谢谢 :) 正在寻找具有边框属性的解决方案，但似乎没有。

【解决方案2】：

据我所知：

border: 1px double #000;
border-radius: 20px;
outline: none;
outline-offset: 0px;

这里border代表内边框，border-radius决定了边框的圆度。尽管我不明白您为什么要提及没有的外边框，但您仍然可以通过提及 outline 来做到这一点。

如果您想同时放置边框并调整间距，您可以使用 outline-offset 来调整所需的间距。

希望对您有所帮助.. !!

【讨论】：

这不是我要找的。我想要一个 15px (border: 15px solid $card-border;) 的边框，它具有尖锐的（垂直的）外边缘但圆形的内边缘。您的回答会导致外缘和内缘都变圆。

【解决方案3】：

试着给你的元素box-sizing: border-box

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

【讨论】：

【解决方案4】：

对于外部元素什么都不做，因为 border-radius 属性的默认行为是 0 而对于内部元素

Your element selector { 
            border-radius: the value you want px
}

【讨论】：