如何实现设计图中样式的按钮圆角？已掌握border-radius属性

你提到的这种非对称弯曲边框的按钮，不用复杂工具，靠CSS就能实现，下面是两种实用方案：

方案一：用border-radius多值语法快速实现 #

适合简单的不规则圆角样式，比如按钮左右两端弧度不同、上下边平直的情况。

直接上代码：

<button class="curved-btn">自定义边框按钮</button>

.curved-btn {
  padding: 12px 32px;
  border: 2px solid #000;
  /* 语法：水平圆角(左上、右上、右下、左下)/垂直圆角(同上) */
  border-radius: 20px 50px 50px 20px / 10px 10px 10px 10px;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
}

你可以根据设计图里的弯曲程度，调整border-radius里的数值，水平值控制左右方向的弯曲，垂直值控制上下方向的弯曲。

方案二：伪元素+clip-path实现复杂弯曲 #

如果设计的边框有内凹、不规则曲线这类更复杂的样式，用伪元素配合clip-path能搞定。

示例代码：

<button class="complex-curved-btn">复杂弯曲边框按钮</button>

.complex-curved-btn {
  position: relative;
  padding: 12px 40px;
  background: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.complex-curved-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #000;
  /* 用clip-path定义多边形路径，实现不规则边框 */
  clip-path: polygon(0 0, 92% 0, 100% 15%, 100% 85%, 92% 100%, 0 100%);
  z-index: -1;
}

clip-path里的坐标可以自己调整，或者用在线工具生成路径后直接复制过来，适配你的设计图。

内容的提问来源于stack exchange，提问作者Алексей Синельник