This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
CSS has properties that let us create rounded corners on elements without the need for any images or extra markup. With border-radius, we can define exactly how rounded the borders appear.
Quick Reference
The border-radius property is the shorthand property for:
.box {
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 10px;
}
So, instead of writing each declaration, we can simply use the border-radius
property to define the curve of each corner:
.box {
border-radius: 20px 10px 20px 10px;
}
The top-left and bottom-right values are the same, and the top-right and bottom-left value are as well. So we can shorten this further:
.box {
border-radius: 20px 10px;
}
If we want to set an even border-radius for each side, we'll simply need to define one value:
.box {
border-radius: 20px;
}
Related Articles
You need to sign up for Treehouse in order to download course files.
Sign up