Use border-radius to soften an element’s corners. Give it a measurement value: larger values make the corners more rounded. Or use a percentage—50% can turn borders into a circle. A tiny property, but it helps a plain link feel like a proper button rather than a lonely bit of text. section 20.5
Round a navigation link into a button
Apply a background color and padding first, then add border-radius. Here, .75rem rounds each navigation link’s corners while the other declarations supply its button-like color, space, size, and uppercase label. section 20.5
h1 { #1
padding-top: 1rem; #1
} #1
.btn { #2
background-color: #362507; #2
padding: .25rem .75rem; #2
border-radius: .75rem; #2
font-size: 1rem; #2
color: #cdc9c1; #2
text-transform: uppercase; #2
} #2
nav ul { #3
display: flex; #3
list-style-type: none; #3
} #3
nav li { #3
padding-left: 1rem; #3
} #3
a { #4
text-decoration: none; #4
} #4
a:hover { #4
color: #362507; #4
background-color: #cdc9c1; #4
} #4
h1 { #5
font-size: 4rem; #5
font-weight: bold; #5
font-family: "Playfair Display", Georgia, serif; #5
} #5
Inspect the .btn rule to see border-radius: .75rem used alongside padding and color for navigation buttons. section 20.5
