Question

I am trying to create a single round (bottom right) corner on my navigation menu.
I have a ul id labeled “main-nav” and I created a li class labeled “round“.
I added this li class to the Music link to get the round corners, but nothing happened.

Here is a fiddle//
http://jsfiddle.net/2qRLU/3/

Answer 1

You wrote .round li This will try to target list items nested inside elements with the “round” class.

You need to write li.round This targets list items that have the class “round” on them.

Note that spaces are important, it would be wrong to write li .round as this would target children of list items that have the “round” class.

http://jsfiddle.net/2qRLU/4/

---

If you wanted to style corners individually you can use the more specific versions:

border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-left-radius:15px;
border-bottom-right-radius:20px;

I’ve styled them all here to show the different types, but in practice you probably just want to style one corner, so here’s a version of your fiddle with only the bottom-right corner curved: http://jsfiddle.net/2qRLU/6/

---

Also, as a side note, unless you need to support older versions of the browsers, it is safe enough to just write border-radius without all the vendor prefixes. Browsers haven’t needed vendor prefixes for border-radius for a while now.

You can test it without prefixes on your browsers here: http://jsfiddle.net/2qRLU/5/