homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
round tabs
is there a easy way to do this?
wceend




msg:1208708
 4:39 pm on Apr 24, 2003 (gmt 0)

Hi

I'm trying to make tabs with round corners. I know there is a solution with a backgroundimage but the name's are generated with a CMS (so I don't know how the tabs are going to be. So that tric won't work.

My CSS
------------------------
#tabarea {
border-bottom-color: Black;
border-left: 0px none Black;
border-right: 0px none Black;
border-top: 0px none Black;
border-bottom: 1px solid #CECECE;
padding: 2px 2px;
}

#tabarea a{
background-color: #f0f0f0;
border: 1px solid #cccccc;
padding: 2px 1em 2px 1em;
text-decoration: none;
}

#tabarea a, #tabarea a:visited {
color: Blue;
}

#tabarea a:hover {
background-color: #d0d0d0;
color: #606060;
}
-----------------
HTML

<div id="tabarea"><a href="#">hello</a> <a href="#">world</a></div>

Has anybody a suggestion?

Thanks

Jonathan van den Bosch

 

BlobFisk




msg:1208709
 5:18 pm on Apr 24, 2003 (gmt 0)

Welcome [webmasterworld.com] to WebmasterWorld, wceend!

The only solution I have seen to this is outlined here [albin.net]. I'm not sure if it's exactly what you are looking for though.

HocusPocus




msg:1208710
 6:43 pm on Apr 24, 2003 (gmt 0)

The border-radius property is a proposed feature for CSS3 which creates rounded corners. Mozilla/Netscape browsers currently support this feature via the proprietary -moz-border-radius property. Both are defined here. Browsers that support neither should simply ignore them.

a.tab {
background-color: #d0b0ff;
border: 2px solid #000000;
border-bottom-width: 0px;
border-color: #f0d0ff #b090e0 #b090e0 #f0d0ff;
-moz-border-radius: .75em .75em 0em 0em;
border-radius-topleft: .75em;
border-radius-topright: .75em;
padding: 2px 1em 2px 1em;
position: relative;
text-decoration: none;
top: 3px;
z-index: 100;
}

wceend




msg:1208711
 3:29 pm on Apr 27, 2003 (gmt 0)

Thank you!

Your suggestions where a great help!

Thank you!

Jonathan

[edited by: heini at 5:42 pm (utc) on April 27, 2003]
[edit reason] removed url per TOS / thanks! [/edit]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved