即使它具有边框半径设置，如何使 div 获得方形边框答案

【问题标题】：How can I make div to get square border even though it has border-radius setting即使它具有边框半径设置，如何使 div 获得方形边框
【发布时间】：2018-07-22 22:57:20
【问题描述】：

现在我正在处理 HTML 页面。

我用'border-radius: 150px'制作了div，所以这个div有半径边框。

但我需要给这个 div 方形边框。当然不仅仅是精确的边界，也许类似的边界是可以的。

但我不知道该怎么做。请告诉我。

谢谢。

编辑

现在我发现大纲不适用于 Chrome 和 Firefox。在 Chrome 中，大纲仅针对其自身区域，但在 Firefox 中，大纲针对包括其子 dom 节点在内的区域。现在我想让 Firefox 和 Chrome 的大纲操作一样。如何在 Firefox 中执行此操作。

【问题讨论】：

outline...试试看。
你为什么要使用border-radius——你想让那个属性在你的div上做什么？我问这个是因为border-radius 告诉 div 有圆角边框。也许您使用了错误的属性，认为border-radius 做了其他事情？
@gibberish，我正在使用边界半径，因为我必须为 div 提供背景等。谢谢
如果不需要圆角，就不需要border-radius。把那个设置出来。或者，告诉我们您为什么使用border-radius。
@Paulie_D，谢谢，这只是答案。它运作良好。

标签： html css border

【解决方案1】：

希望这是您正在寻找的。p>

div {
  background: red;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  outline: 5px solid green;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

@Alex 乐于助人
请看我的新编辑，请告诉我，谢谢！
抱歉，我认为 chrome 和 mozilla 之间没有区别。您能否提出一个新问题，以便每个人都可以提供帮助。并在此处评论链接，以便我可以帮助您
如果有任何后代元素超出自身区域（可能位置：绝对），那么你可以看到轮廓的差异。 Chrome 的轮廓仅针对其自身区域，即使后代元素在外部。但是 Firefox 的大纲是针对包括后代元素的区域。
我无法重现您所指的内容。如果您有新问题，请点击按钮提出；您可能需要包含指向此链接的链接。