Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Can you help me?

3 Answers

With border-radius if all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left in that order.

Full:

.wildlife {
  border-radius: 20px 5px 20px 5px;
}

In shorthand if only two values are supplied, the first value, in this case 20px, represents the top-left and bottom-right radius values, and the second value, in this case 5px, represents the top-right and bottom-left radius values.

Shorthand:

.wildlife {
  border-radius: 20px 5px;
}
.wildlife {
  border-radius: 20px 5px;
}

Hi Leon,

It would be a lot better if you had posted the question and your code, that way we wouldn't have to go complete the challenge to find out the question, just a thought for the future.

To answer your question, as the four corners share two of the same radius, 20px 5px 20px 5px you can shorten it to 20px 5px and the browser will know to interpret that as 20px 5px 20px 5px much the same as it does with hex colours like #ffffff we can use #fff and the browser knows its the same just shorthand.

Hope this helps.