freeCodeCamp Challenge Guide: Add Rounded Corners with border-radius

Guide
1

Add Rounded Corners with border-radius

Problem Explanation

Sometimes you want to have rounded corners instead of square ones. In this case we use the “border-radius” property to determine how rounded we want our corners to be.

To adjust the roundness of a corner use:

.example {
border-radius: 5px;
}

The higher the number, the more round the corner.

.example {
border-radius: 20px;
}

Using the border-radius property we can round the corners of our element, whether that means rounding a border, a background image, or the fill color of the element itself. You will only notice the new rounded corners if there is a color change!

If you only include one number, that radius will be applied to all four corners. If you use two values, the first applies to the top-left and bottom right corners while the second applies to the top-right and bottom-left.

.exampleTwoValues {
border-radius: 5px 10px;
}

If you use four values, the values apply to top-left, top-right, bottom-right, and bottom left.

.exampleFourValues {
border-radius: 5px 7px 10px 15px;
}

If you use three values, the first applies to top-left, the second applies to top-right AND bottom-left, and the third applies to the bottom right.

.exampleThreeValues {
border-radius: 5px 10px 15px;
}
9 Likes
2

For adding the second class for the green border around the cat picture used coma after smaller - image (img class=“smaller-image thick-green-border”) If anymore concerns, reply me so I can help you :slight_smile:

1 Like
3

Here is the correct answer. just add border radius into your existing

.red-text { color: red; }

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 10px;
}

.smaller-image {
width: 100px;
}

6 Likes
4

Can anyone help with the second possibility, by adding the border command within the <img …> brackets?

5

Yeah, the site says the border radius doesn’t need to be defined in CSS style; but could be applied directly to the img bracket. How to do that? ( <img … border-radius:10px;> isn’t doing it…

6

Never mind,
the second possible answer to the round borders, aside from adding it to the style, is adding:

style=border-radius:10px; to the ‘img’, like below:

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. " style=border-radius:10px;>

6 Likes