如何在 HTML-CSS 中的单边添加圆角

Question

是的，我唯一想做的就是应用 border-radius 属性（或类似的东西）只对按钮做 1 个角，就像这样：“https://i.stack.imgur。 com/Mm9VN.jpg

Don't worry, the link is generated by Whosebug so nothing to worry about the link.

此外，我需要包含一些代码，否则我的问题将被关闭：这是我尝试过的：

.button {
  border-radius: 30;
}

<button type="button" class="button">Button</button>

但是它将属性应用于所有角落，这不是我想要的。

谢谢！

Answer 1

像下面的代码片段一样尝试，有关更多信息，请查看 here:

.button {
  border: 1px solid #00bfff;
  border-bottom-right-radius: 30%;
  border-top-right-radius: 30%;
  padding: 20px;
  background: #00bfff;
}

<button type="button" class="button">Button</button>

How to add rounded corners to a single side in HTML-CSS