You know the Twitter menubar how it's sort of rounded. How do I do that (in CSS?). I also want to make sure it goes around all my menu items.
+3
A:
Note that this won't work in IE as purely CSS. But here is how you do it:
http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/
/* 4 rounded corners */
.all-four-rounded-corners {
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
as the article shows you can also do each corner individually. But as of right now in CSS 2, you are unable to do this in IE because it is not an official supported CSS method until CSS 3. That is why, moz, webkit, and khtml are appended on the front.
Nick Berardi
2009-05-18 13:00:40
It doesn't seem to work. I just get a long rectangular strip across the menu that I applied it to.
alamodey
2009-05-20 11:03:23
What browser are you using? And what version is it?
Nick Berardi
2009-05-20 13:07:17
A:
You want rounded corners on an element? My advice for this is to use the CSS rules:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
On the down side, it won't give you rounded corners in IE, but on the up side, it won't give you headaches. If you want cross platform, take a look at jQuery Corners or the myriad tutorials across the internet on rounded corners.
nickf
2009-05-18 13:01:42
A:
For pure CSS, not all browsers support it, sadly.
http://www.css3.info/preview/rounded-border/
Your other choice is to use images and do table layout which is a bit old school but will work consistently across browsers.
SJML
2009-05-18 13:02:49
A:
It's not easy. There are at least these techniques:
Make your items a fixed size and just use a background image that contains your corners
Wrap your items in a 3 x 3 table. The center cell is your content, and the surrounding cells contain images (directly or via CSS) that have the corners you want.
If your items are a consistent height but inconsistent width, you can use a double div solution
double div
<style type=text/css>
.ItemOuter { background-image: url('left-side-top-and-bottom-rounded-corners.png'); }
.ItemInner { background-image: url('right-side-top-and-bottom-rounded-corners.png'); background-position: top right; margin-left: 10px; }
</style>
...
<div class="ItemOuter"><div class="ItemInner">content</div></div>
larson4
2009-05-18 13:06:04
+1
A:
Get an Firefox addon called firebug. https://addons.mozilla.org/en-US/firefox/addon/1843 It allows you to quickly inspect elements on the page from inside your browser.
After you've installed it go to twitter.com and hit the little bug icon in the bottom right corner of your browser. Then hit inspect and you can hover over the menu items to see their markup. Click on the items and you can see the CSS for them. You can even change the css and it will be updated live on the page.
Here's what I got on twitter.com
HTML
<ul class="top-navigation round">
<li>
<a id="home_link" accesskey="h" href="http://twitter.com/home">Home</a>
</li>
<li>
</li>
CSS
.round {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
It seems that they just use proprietary browser techniques for creating rounded corners. This won't work in IE. There are other ways. Just inspect other sites to see how they do it.
Christian Schlensker
2009-05-18 13:07:59
I tried to copy it. Instead I've got my links on top of one another and the box is white and rectangular :/
alamodey
2009-05-18 13:19:24
You may not have copied all the styles. Make sure you add a style to <li> elements as well as the <ul>. Try adding:ul.topnavigation li { display:inline; }Also the round corners in my example will only show up in firefox. For IE you will need to use a different method for round corners that uses images. There are lots of these online. Just search google for 'css round corners'.
Christian Schlensker
2009-05-18 19:35:57
It works in Firefox but not in Safari. However, when I go to Twitter on Safari, I can see the rounded menubar.
alamodey
2009-05-20 11:05:59
you can use -webkit-border-radius for safari/chrome/etc.. all the browsers that use webkit.
Christian Schlensker
2009-05-21 14:58:09
A:
Here's a neat trick that will work in all browsers, including IE. Also note that no images is required.
Copy/paste the following html snippet and save as a html file and try it out:
<head>
<style type="text/css">
<!--
#container {background: #cccccc;}
.roundtop {background: #ffffff;}
.roundbottom {background: #ffffff;}
.r1{margin: 0 5px; height: 1px; overflow: hidden; background: #cccccc;}
.r2{margin: 0 3px; height: 1px; overflow: hidden; background: #cccccc;}
.r3{margin: 0 2px; height: 1px; overflow: hidden; background: #cccccc;}
.r4{margin: 0 1px; height: 2px; overflow: hidden; background: #cccccc;}
.content {padding: 10px;}
-->
</style>
</head>
<body>
<div id="container">
<div class="roundtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="content">Your content goes here ..</div>
<div class="roundbottom">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
</body>
Here's an enlarged screenshot to better get a grasp of what's going on. The upper image shows the result in the browser, and the lower image shows what it looks like if you color the divs differently.
Enlarged screenshot of div(s) with rounded corners
Good luck! //Magnus
Magnus Skog
2009-05-18 17:06:51
While this is certainly an option, using extra markup in this way is generally considered bad semantic design.
y0mbo
2009-05-18 19:19:16