Css 50%的边界半径用于提交，但不用于文本输入

我正在尝试创建一个带有文本输入和提交按钮的表单。我想把角落弄圆。它在提交按钮上工作正常，但在文本输入上工作不正常：

表单{
显示器：flex；
调整内容：灵活启动；
}
表单输入[type=“text”]{
填充物：5px10px；
边框：1px实心#d7d7；
边界权：无；
边界左上半径：50%；
边界左下半径：50%；
}
表单输入[type=“submit”]{
背景：#000；
边框：1px实心#000；
边界右上角半径：50%；
边框右下半径：50%；
大纲：无；
}

---

尝试使用

em

而不是

%

表单{
显示器：flex；
调整内容：灵活启动；
}
表单输入[type=“text”]{
填充物：5px10px；
边框：1px实心#d7d7；
边界权：无；
边框左上半径：1米；
边框左下半径：1米；
}
表单输入[type=“submit”]{
背景：#000；
边框：1px实心#000；
边框右上角半径：1米；
边框右下半径：1米；
大纲：无；
}

---

如果希望非方形元素具有圆角，则不应使用百分比。使用绝对单位，如

px

或

em

：

表单{
显示器：flex；
调整内容：灵活启动；
}
表单输入[type=“text”]{
填充物：5px10px；
边框：1px实心#d7d7；
边界权：无；
边框左上半径：15px；
边框左下半径：15px；
}
表单输入[type=“submit”]{
背景：#000；
边框：1px实心#000；
边框右上角半径：15px；
边框右下半径：15px；
大纲：无；
}

---

您的50%是根据元素的宽度计算的。由于“提交”按钮非常窄，文本输入也更宽，因此边框半径看起来不同。您将需要使用其他一些绝对单位，例如px或em

表单{
显示器：flex；
调整内容：灵活启动；
}
表单输入[type=“text”]{
填充物：5px10px；
边框：1px实心#d7d7；
边界权：无；
边框左上半径：15px；
边框左下半径：15px；
}
表单输入[type=“submit”]{
背景：#000；
边框：1px实心#000；
边框右上角半径：15px；
边框右下半径：15px；
大纲：无；
}

为什么您认为它不起作用？它按预期工作，但不像您希望的那样，尝试

em

或

px

值，正如在一些回答中所建议的那样。从您提供的代码片段中可以看到，它们显然不以您希望的方式工作。我建议您使用像素