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 CSS Basics (2014) Enhancing the Design With CSS Border Radius

Muhammad Rizwan
Muhammad Rizwan
8,595 Points

Finally, use the shorthand notation to shorten the border-radius value down to two units.

I wish it could be better question.

style.css
/* Complete the challenge by writing CSS below */

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

}
index.html
<!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>
VIVIAN CENTENO
VIVIAN CENTENO
2,335 Points

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

}

YOUR CODE border-radius: top right bottom left; or SHORTHAND border-radius: 20px 5px;

border-radius: top&bottompx R&Lpx;

8 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher

Muhammad;

Simply remove one set of 20px 5px from the code and it will function the same. Remember for border-radius the four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Hope it helps,

Ken

Just wanted to add my feedback that the language for the challenge needs to be adjusted. Like others, I did not understand reducing the value by "two units".

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

In this shorthand, 20px represents top left and bottom right radius, and 5px represents top right and bottom left radius. Is that what you're looking for?

James Marchant
James Marchant
6,963 Points

I was very confused by the phrasing of this. I think the "Two units" should be written as "Two values" because I was trying to shorten the actual radius down by two pixel units not the CSS statement down to two values.

Alan Coggins
Alan Coggins
5,436 Points

This is a badly written challenge. I actually used the shorthand notation in the first step and it was marked correct. I then had no idea what they were asking for in the second question ... two units? ... is that 2 pixels, 2 em, 2 elephants???

Muhammad,

Here's another detail:

It's fairly simple once you see it, but you may encounter a common problem--a nitpicky Challenge code window. For example, I entered correct CSS but kept getting error messages--until I cut-and-pasted it from elsewhere and submitted it several times. Suddenly, it passed. I've encountered this in several code challenges, especially the Python courses.

I spent way too long staring at this. I like every one above was so lost. I even went ahead and tried scaling down the the radii. Luckily I decided to just search for it.