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
Ruh Ullah Shah
Courses Plus Student 5,111 PointsNot able to get around border radius code challenge
Hi,
I am trying to solve this code challenge as per the problem statement but my solution gets rejected.
Need some suggestion.
Thanks, Ruh Ullah Shah
/* Complete the challenge by writing CSS below */
.wildlife {
border-radius: 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>Lake Tahoe</title>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="primary-content">
<div class="wildlife">
<h2>Check out all the Wildlife</h2>
<p>
As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
</p>
</div><!-- End .wildlife -->
</div><!-- End .primary-content -->
</body>
</html>
9 Answers
Ruh Ullah Shah
Courses Plus Student 5,111 PointsHello Jaun,
1) Let's give the .wildlife div rounded corners! Add the shorthand property for setting rounded corners. Set the top-left border radius to 20px, the top-right radius to 5px, the bottom-right radius to 20px, and the bottom-left radius to 5px. 2) Finally, use the shorthand notation to shorten the border-radius value down to two units.
//Solution 1) .wildlife { border-radius: 20px 5px 20px 5px; } //works fine
2) .wildlife { border-radius: 2px; }//gets rejected
I even tried two values but in vain
Juan de Elena O'Shea
4,757 PointsHello!
Can you please post the question too?
I believe they are not asking in ems, but in pxs... and I also think they ask specific values for each corner... and then ask you to short-hand that to two values...
Try that and come back if you have any more questions!
Juan de Elena O'Shea
4,757 PointsRemember that you can either type the four corners (top-left, top-right, bottom-right, bottom-left, always think clock-wise) or in short-hand and when possible (same values), you can type one single value for top-left and bottom-left together, and top-right and bottom-left together. (or if you are real lucky, one single value to apply to the four corners!).
And in the challenge, they are asking you to input values of 20px and 5px, no 2px at all! (it may look good, but is not the point of the challenge :p)
Ruh Ullah Shah
Courses Plus Student 5,111 Pointsselector { border-radius: top right bottom left; or border-radius: top/bottom left/right; }
The second statement asks to shorten the border radius value "to" 2 units
I think .wildlife { border-radius: 2px; } should have worked.
I even tried .wildlife { border-radius: 18px 3px; } that didn't work either
Juan de Elena O'Shea
4,757 Pointstry:
.wildlife { border-radius: 20px 5px; }
Cheers!
Ruh Ullah Shah
Courses Plus Student 5,111 PointsVow that is a very confusing question. The question could have been a bit clearer.
Thanks for the clarification.
Cheers!
melissa brown
4,670 Points.wildlife { border-radius: 20px 5px 20px 5px; }
worked for me
Ling-Yi Lin
6,187 PointsI think it's a weird question, too. Anyways, I just put border-radius: 20px 5px on the screen, which is also what did for the first question, and it works.
Jeff Fogarty
15,846 PointsThis question confused me for a bit as well.. 2 "units" NOT 2 px oops!