Why won't my border round off it's corners?

Question

I am trying to make to simple buttons. Easy. However they will not for some reason round off the corners of the outline. This is what i have for my HTML and 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;

}

What browser are you using? – Alberto I.N.J. Jul 03 '15 at 03:06 — Alberto I.N.J., Jul 03 '15 at 03:06

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

The cause seems to be outline: 3px solid #000000;

Change to:

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

After all, your question states Why won't my **border** round off it's corners? But if it's outline you need then please see Outline radius? (user289112 provided link but removed his answer)

edited May 23 '17 at 11:58

Community

1
1

answered Jul 03 '15 at 03:08

Onimusha

3,348
2
26
32

Thanks That Fixed it. – Alec Grogan-Crane Jul 03 '15 at 03:12

score 0 · Answer 2 · answered Jul 03 '15 at 03:11

Use border: solid 2px #000; not outline.

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;
}

Why won't my border round off it's corners?

2 Answers2