Twitter Menu
Note that this will not work as pure CSS in IE. But this 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 separately. But now, in CSS 2, you cannot do this in IE, because this is not the official supported CSS method until CSS 3. That's why moz
, webkit
and khtml
are added to the front.
a source to share
Get a Firefox addon called firebug. https://addons.mozilla.org/en-US/firefox/addon/1843 This allows you to quickly inspect elements on a page inside your browser.
Once you've installed it, go to twitter.com and click on the little bug icon in the bottom right corner of your browser. Then press "Check" and you can hover over the menu items to see their markup. Click on the elements and you can see the CSS for them. You can even change the css and it will be updated live on the page.
This is 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 looks like they are just using native browser methods to create rounded corners. This won't work in IE. There are other ways as well. Just browse other sites to see how they do it.
a source to share
Do you want rounded corners on an element? My advice for this is to use CSS rules:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
At the bottom, it won't give you rounded corners in IE, but on the other hand, it won't give you headaches. If you want to be cross-platform check out jQuery Corners or countless tutorials all over the internet on rounded corners .
a source to share
For pure CSS, not all browsers support it unfortunately.
http://www.css3.info/preview/rounded-border/
Your other choice is to use images and make a table layout, which is a little outdated but will work consistently across browsers.
a source to share
Here's a neat trick that will work in all browsers, including IE. Also note that no images are required.
Copy / paste the following html snippet and save it as html file and try:
<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 screen shot to better understand what's going on. The top image shows the result in the browser, and the bottom image shows what it looks like if you color the divs differently.
Enlarged screenshot of div (s) with rounded corners
Good luck! // Magnus
a source to share
It's not easy. There are at least the following methods:
-
Make your objects a fixed size and just use a background image containing your corners.
-
Wrap your items in a 3 x 3 table. The center cell is your content, and the surrounding cells contain images (either directly or via CSS) that have the corners you want.
-
If your elements have consistent heights but inconsistent widths you can use the 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>
a source to share