Question

我正在尝试制作简单的按钮。简单。然而，他们不会出于某种原因使轮廓的角落变圆。这就是我的HTML和CSS

<a class="login-worker" href="">LOG IN AS A WORKER</a>
<a class="login-user" href="">LOG IN AS A USER</a>

.login-worker,
.login-user {
    font-size: 22px;
    font-weight: 600;
    outline: 3px solid #000000;
    margin: 5px;
    text-decoration: none;
    color: #000000;
    padding: 20px;
    padding-right:75px;
    padding-left:75px;
    position: relative;
    border-radius: 5px;
    background-color: #248FD4;

}

Answer 1

原因似乎是outline: 3px solid #000000;

更改为：

border: 3px solid #000000;
border-radius: 5px;

毕竟，您的问题是Why won't my **border** round off it's corners? 但如果您需要大纲，请参阅Outline radius?（user289112提供链接但删除了他的答案）

Answer 2

使用border: solid 2px #000;未概述。

Example here

.login-worker,
.login-user {
    display: block;
    font-size: 22px;
    font-weight: 600;
    border: solid 2px #000;
    margin: 5px;
    text-decoration: none;
    color: #000000;
    padding: 20px;
    padding-right:75px;
    padding-left:75px;
    position: relative;
    border-radius: 5px;
    background-color: #248FD4;
}

为什么我的边界会绕过它的角落？

2 个答案: