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

Brian Fink
Brian Fink
2,897 Points

The solution to task 2 should be "border-radius: 2px", correct? This answer is not being accepted. Is this a bug?

I'm not sure if this is a bug or if I'm failing to understand something, but I think that this code should complete the task. Can anyone see what I'm doing wrong?

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

.wildlife {
  border-radius:20px 5px 20px 5px;
  border-radius:2px;
}
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>

9 Answers

Renee Brown
Renee Brown
16,621 Points

Hi Brian,

You have two border-radius with conflicting information.

mickey Odunikan
mickey Odunikan
4,983 Points

It looks like the 2px isn't being accepted because you have to border-radius properties under the same rule. I think you are probably suppose to use a different selector.

mickey Odunikan
mickey Odunikan
4,983 Points

Renee is correct I just tried it enter this code:

.wildlife { border-radius: -- --; }

Sean T. Unwin
Sean T. Unwin
28,690 Points

I think you are misunderstanding the question. They want you to trim the values from 4 to 2. Since there only 2 distinct values we can use the border-radius shorthand. The shorthand is able to take 2 values which correspond to [first value] = top-left and bottom-right and [second value] = top-right and bottom-left. Think of it like joining the end points of each line in an X.

The answer is to simply remove the last 2 values, out of the 4, from border-radius.

mickey Odunikan
mickey Odunikan
4,983 Points

I probably haven't done that lesson then, but my only other guess is to seperate the two sections of values with a comma instead of writting border-radius a second time.

Renee Brown
Renee Brown
16,621 Points

It works the same as if you're defining the values for four sides of a box. The top and bottom values can be defined as one value and the left and right as another. So instead of defining all four sides or corners, you are shortening it to two values.

Another example is when using hexadecimal colors. Example: #00FF00 can simply be shortened to #0F0

Brian Fink
Brian Fink
2,897 Points

Thanks for the responses everyone. The first border-radius command was leftover from the previous task. I already tried it with just the second command, but that still didn't clear the task.

mickey Odunikan
mickey Odunikan
4,983 Points

It just wants you to change the 20px 5px 20px 5px from the first step 20px 5px because they are equivalent. I went the section your on and tried it.

Brian Fink
Brian Fink
2,897 Points

Thanks for the responses everyone. The first border-radius command was leftover from the previous task. I already tried it with just the second command, but that still didn't clear the task.

Brian Fink
Brian Fink
2,897 Points

Wait, sorry, I understand now. Thanks!