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 Selectors Going Further with Attribute Selectors and Pseudo-Classes :first-child and :last-child Challenge

Aaron HARPT
Aaron HARPT
19,845 Points
Posted by Aaron HARPT
Aaron HARPT
19,845 Points

Code challenge problem

Can someone help me with the border-radius on this code challenge?

"Create a pseudo-class selector that targets the first-child li in .main-nav. Remove all border styles by setting border to none. Then, set the top-left and bottom-left border-radius to 5px."

style.css 
/* Complete the challenge by writing CSS below */
.main-nav li:first-child {
  border: none;
 border-radius: 5px 5px 0 0;
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
      <h1>My Site!</h1>
      <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>
    <div>
      <p>Tattooed viral put a bird on it skateboard. Drinking vinegar locavore squid farm-to-table, dreamcatcher tattooed kitsch scenester. Tousled wolf squid Wes Anderson PBR, Williamsburg banh mi dreamcatcher stumptown ethnic sartorial mlkshk. Hella mixtape bespoke mustache Bushwick. Post-ironic hashtag jean shorts, Truffaut organic roof party pop-up wayfarers selvage narwhal. Mixtape roof party twee, post-ironic bespoke hella artisan meggings Carles brunch pop-up Tonx street art normcore. DIY paleo slow-carb occupy tofu fingerstache.</p>
    </div>
</body>
</html>
Kieran Gibbons
Kieran Gibbons
17,434 Points
Kieran Gibbons
Kieran Gibbons
17,434 Points

I think the border radius goes clockwise starting at top left so i think they are in the wrong order.

9 Answers

huckleberry
huckleberry
14,636 Points
huckleberry
huckleberry
14,636 Points

Hey there,

It's a simple error in the way the values for your border-radius property are laid out.

Think about the border property shorthand. You have 4 values for the width or thickness of the border and the 4 available value slots start at the top and go clockwise. so ...

selector {
    border: value1 value2 value3 value4;
}

starting from the TOP and going clockwise that means ...

  • value1 = top
  • value2 = right
  • value3 = bottom
  • value4 = left

In the border-radius property shorthand, the values also go clockwise starting from the top but starting in the left corner.

so ...

selector {
    border-radius: value1 value2 value3 value4;
}

starting at the top left corner and going clockwise, that gives you

  • value1 = top LEFT
  • value2 = top RIGHT
  • value3 = bottom RIGHT
  • value4 = bottom LEFT

Now, with that in mind... what should your code be?

ellie adam
ellie adam
26,377 Points
ellie adam
ellie adam
26,377 Points

.main-nav li:first-child { border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

Sebastiao Fernando
Sebastiao Fernando
2,113 Points
Sebastiao Fernando
Sebastiao Fernando
2,113 Points

it works :

.main-nav li:first-child{ border: none; border-radius: 5px 0 0 5px; }

Nolan Frazier
PLUS
Nolan Frazier
Courses Plus Student 38,752 Points
Nolan Frazier
Nolan Frazier
Courses Plus Student 38,752 Points 
.main-nav li:first-child {
  border: none;
  border-radius: ----;
}
Christin Davidian
Christin Davidian
3,634 Points
Christin Davidian
Christin Davidian
3,634 Points

.main-nav li:first-child { border: none; border-radius: 5px 0 0 5px; }

MUZ140526 Alex Mawene
MUZ140526 Alex Mawene
2,687 Points
MUZ140526 Alex Mawene
MUZ140526 Alex Mawene
2,687 Points

this one works for me

/* Complete the challenge by writing CSS below */ .main-nav li:first-child { border: none; border-radius: 5px 0 0 5px; }

matthew kiko
matthew kiko
11,840 Points
matthew kiko
matthew kiko
11,840 Points

.main-nav li:first-child { border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

Hasha K J
Hasha K J
7,355 Points
Hasha K J
Hasha K J
7,355 Points

border-radius : 5px 0 0 5px;