Border styling

Lesson 5 of 6 in Coddy's CSS Project - Simple Loading Spinner course.

Let's add some rounded styling to the spinner border.

To add border-color only to specific corners use, (top right bottom left)

border-color: black transparent black transparent

The above will only add border color (black) to the top an bottom borders, you can also use border-top-color and border-bottom-color properties!

Don't forget to add the border-width and border-style.

Challenge

Easy

Remove the background color from the spinner and add the following CSS properties:

border-width of 6px
border-style of solid
border-color only for the top and bottom, choose any color you want! (the left and right borders should be transparent)

Also make the whole spinner border rounded, if you are not sure how to do it, check the hint.

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="spinner" />
</body>
</html>

All lessons in CSS Project - Simple Loading Spinner

1Introduction

2The CSS Project

Border styling Project lesson