CODEWITHSUNDEEP
htmlcss
ppaul
ppaul

Reputation: 83

Rounding corners nav bar

Hi Im having troubles rounding corners on my navigation bar, when I write - border-radius: 15px; it round all the corners of the <a> but I want only to round of the <li> so only the margins of the whole toolbar.

Here is a fiddle.

thanks

EDIT

only want home and contact to be rounded

Upvotes: 2

Views: 14407

Answers (5)

S&#243;fka
S&#243;fka

Reputation: 993

-- For updated question --

Remove border-radius property from 'ul#list-nav li a' and add to your CSS file:

ul#list-nav li:first-child a{ border-radius: 15px 0 0 15px;} 
ul#list-nav li:last-child a{ border-radius: 0 15px 15px 0;}

Upvotes: 0

Brad
Brad

Reputation: 198

To round the corners of the first and last li elements. Try 

:first-child and :last-child selectors

Check out the live Demo: http://jsfiddle.net/HYhBe/33/

Upvotes: 2

Asif
Asif

Reputation: 5038

This also works:

ul#list-nav li {
   border:2px solid blue;
   float:left;
   overflow:hidden;
}

li.first{
   border-top-left-radius:15px;
   border-bottom-left-radius:15px;
}
li.last{
    border-top-right-radius:15px;
   border-bottom-right-radius:15px;
}

Here is the updated fiddle.

Upvotes: 6

Maehler
Maehler

Reputation: 6331

Add two new classes; one that rounds the left corners and one that rounds the right corners and apply these to the first and last element respectively.

Fiddle

.round_left {
    border-radius: 15px 0 0 15px;   
}

.round_right {
    border-radius: 0 15px 15px 0;   
}

<ul id="list-nav">
    <li><a href="#" class="round_left">HOME</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">GALLERY</a></li>
    <li><a href="#">THE WAY WE WORK</a></li>
    <li><a href="#" class="round_right">CONTACT</a></li>
</ul>

Upvotes: 1

Praveen Vijayan
Praveen Vijayan

Reputation: 6761

Link updated - http://jsfiddle.net/HYhBe/24/

ul#list-nav li -> float:left & overflow:hidden;

you can remove display inline. li is a block level element.

ul#list-nav li {
   border-radius: 15px; 
   float:left;
   overflow:hidden;
}

Upvotes: 0

Related Questions