Javascript: How to create a rounded corner tab menu?

StackOverflow https://stackoverflow.com/questions/1252906

  •  12-09-2019
  •  | 
  •  

Question

alt text

Hi Guys, Do you know any rounded corners tab like this one that I can download? Or how can I create a tab like that? Do the use of images in the tab menus are required or not? I used the:

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius:5px;
border-top-right-radius:5px;

but it is not perfect. Do you know any helpful links/tutorials about rounded corner tab?

Thanks in advance :)

Cheers, Mark

Was it helpful?

Solution

The best-looking rounded corners are always going to be those done using an image. Anything else is the browser's best attempt, which may not be what you want. It's also far easier to just use images.

You just need a small image for each corner, and another tileable set of images for the rest of the border. Plug it all into CSS classes and you're good to go.

OTHER TIPS

Not yet supported by all browsers, but you can use CSS3 to easily display rounded corners without the need for images or javascript:

<div style="-moz-border-radius: 5px; -webkit-border-radius: 5px;">
    Rounded corners!
</div>

More info: http://www.css3.info/preview/rounded-border

This should allow for graceful degradation in older browsers (just won't show as rounded), but I'd still be inclined to go with images if you want to ensure all your users have the same experience.

Why don't u use jQuery UI? They have nice rounded tabs. See http://jqueryui.com/themeroller/#themeGallery

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top