freeCodeCamp Challenge Guide: Add Rounded Corners with a Border Radius

freeCodeCamp Challenge Guide: Add Rounded Corners with a Border Radius
0

#1

To make round corners it is all about border-radius and pixels.

You can specify a border-radius with pixels. This will affect how rounded the corners are.

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

#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:


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


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