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 trialAaron HARPT
19,845 PointsCode 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."
/* Complete the challenge by writing CSS below */
.main-nav li:first-child {
border: none;
border-radius: 5px 5px 0 0;
}
<!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>
9 Answers
huckleberry
14,636 PointsHey 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
26,377 Points.main-nav li:first-child { border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
Sebastiao Fernando
2,113 Pointsit works :
.main-nav li:first-child{ border: none; border-radius: 5px 0 0 5px; }
Nolan Frazier
Courses Plus Student 38,752 Points.main-nav li:first-child {
border: none;
border-radius: ----;
}
Christin Davidian
3,634 Points.main-nav li:first-child { border: none; border-radius: 5px 0 0 5px; }
MUZ140526 Alex Mawene
2,687 Pointsthis 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
11,840 Points.main-nav li:first-child { border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
matthew kiko
11,840 Pointshttps://teamtreehouse.com/library/css-basics/designing-with-the-latest-features/border-radius-2
follow link to watch video on it
Hasha K J
7,355 Pointsborder-radius : 5px 0 0 5px;
Kieran Gibbons
17,434 PointsKieran Gibbons
17,434 PointsI think the border radius goes clockwise starting at top left so i think they are in the wrong order.