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

Posted by jammie Hargreaves
jammie Hargreaves
Courses Plus Student 2,455 Points

border radius

Hi,

Am i missing something here ? Thanks

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

.wildlife {
   border-top-left-radius: 20px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 5px;
  border-radius: 50%;

}
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>
James Parker
James Parker
3,133 Points
James Parker
James Parker
3,133 Points

Hi, your html looks fine but there is a lot going on in your CSS code that makes it confusing.

A border element needs to have thickness, type, and color defined to work. e.g. for a green dotted border 1 px thick;

border: 1px dotted green;

I don't know what sort of border you want, but I changed your CSS to the following to give a circle border:

.wildlife { border: 20px solid red; border-radius: 50%; }

3 Answers

Brice Roberts
Brice Roberts
22,415 Points
Brice Roberts
Brice Roberts
22,415 Points

The answer is in the first two sentences.

Let's give the .wildlife div rounded corners! Add the shorthand property for setting rounded corners.

You are trying to give individual declarations for each corner, and then the percentage, but you were given the formula for the shorthand to save time. This challenge is looking for the shorthand.

You have everything in the correct order, you just need to make it into one

border-radius:( , , , ,);

jammie Hargreaves
PLUS
jammie Hargreaves
Courses Plus Student 2,455 Points
jammie Hargreaves
jammie Hargreaves
Courses Plus Student 2,455 Points

Awesome, Easy done thank you for the help!

Gonzalo Torres del Fierro
PLUS
Gonzalo Torres del Fierro
Courses Plus Student 16,751 Points
Gonzalo Torres del Fierro
Gonzalo Torres del Fierro
Courses Plus Student 16,751 Points

this is the standard way; but like Brice Roberts mentions above, we need the shorthand.

.box { border-top-left-radius: 20px; border-top-right-radius: 10px; border-bottom-right-radius: 20px; border-bottom-left-radius: 10px; }

so, here is the shorthand:

.box { border-radius: 20px 10px 20px 10px; }

of course, you can change the values, in order to give the right answer to the challenge...:)