CODEWITHSUNDEEP
css
Elias7
Elias7

Reputation: 12881

Styling a Separator Nav with round edges stricly in CSS

My navbar looks like:

   <div id="navbar">
        <ul class="tabnavcenter">
          <li class="active"><a href="#tab1" data-toggle="tab">Test</a></li>
          <li class="aaron"><a href="#tab2" data-toggle="tab">Test</a></li>
          <li><a href="#tab3" data-toggle="tab">Test</a></li>
          <li><a href="#tab4" data-toggle="tab">Test</a></li>
          <li><a href="#tab5" data-toggle="tab">Test</a></li>
        </ul>
   </div>

And my CSS for the NavBar looks like:

ul.tabnavcenter    {

    background: #fff;
    padding:0px 0px;
    font-size:14px;
    font-weight:bold;
    color:#000;
    overflow:hidden;
    width:957px;
    background-image: -moz-linear-gradient(top, #cacaca, #848484);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
                         }
  ul.tabnavcenter li {
    float:left;
    border-right: #DDDDDD 1px solid;
     list-style-type:none;
                }

    ul.tabnavcenter li.active  {
       background-image: -moz-linear-gradient(top, #cacaca, #4B4B4B);
       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#4B4B4B));

            }


   ul.tabnavcenter li:hover {
       background: #7D7D7D;
       cursor:pointer;
                            }

Is there a possible way I could add rounded edges to the first and last link just using CSS? :)

Upvotes: 0

Views: 809

Answers (1)

Tim M.
Tim M.

Reputation: 54387

I put your code into a JS Fiddle but it's not apparent how you want to handle the last link (because of the gradient to the right, a rounded edge would look strange).

http://jsfiddle.net/Kk7vK/

Is there a possible way I could add rounded edges to the first and last link just using CSS?

First/last can be selected using :first-child and :last-child. Browser support is good (IE7+) for first-child, not so good (IE9+) on last-child.

Example 

ul.tabnavcenter > LI:first-child{ /* do something different */ }

CSS Selector Reference: http://www.w3.org/TR/selectors/

Rounded edges can be achieved using border-radius (with vendor-specific prefix(es) such as -moz-border-radius). Internet Explorer support for border-radius started with IE9 (though there are polyfills for < IE9).

Upvotes: 1

Related Questions