I am having a hard time understanding how the rounded corners work on the Fabrikam website.  I originally thought that it was using the corresponding tl.gif (top-left), bl.gif, tr.gif, and br.gif images for the rounding, but I have removed these files and it still works.  So there must me some magic that I don't know about in the style sheets.  Here is the aspx markup in MasterPage.master:

 <div id="nav-main">

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal"

Width="400px" CssClass="menu-main" MaximumDynamicDisplayLevels="0" StaticSelectedStyle-CssClass="StaticSelectedStyle" />

<div>&nbsp;</div>

</div>

Now here are the corresponding css elements in the style sheet:

background:#608fc8 url(../../images/bg-nav.png) no-repeat;

margin-right:auto;

padding:.8em 0 1em 20px;

font-weight:bold;

background:#4b6cb5 url(../../images/bg-nav-side.png) top right no-repeat;

_width:25.5%;

top:0;

Can someone please explain to me where the magical rounding takes place, or a link to a site that can explain it to me.  I would greatly appreciate it.  Thanks. 

There are lots of different methods you can use to create rounded corners. Some use javascript, some use images and some use html elements. There is a link to most of these methods here:

http://www.smileycat.com/miaow/archives/000044.php 

They are no different than the rounded corners you see in these forum messages.  The link that ca8msm sent is a great resource though and should clear up anyone's questions.

You pretty much answered your own question.

Check out this image inside of an image viewer: images/bg-nav.png

This is in your style sheet

background:#FB83BA url(../../images/bg-nav.png) no-repeat;

margin-right:auto;

padding:.8em 0 1em 20px;

font-weight:bold;

and the class is called out in your Master Page

<div id="nav-main">