Rounding Widgets Corners?? (Wordpress)

Hello everyone,

I am attempting to round my widgets corners that I learned from this tutorial

I managed to get the bottom corners rounded but but I can't figure how to fix the top part of the widget..


Here is the code from the tutorial.

.widget { 
    background: #FF9900 url(images/rounded_bottom.gif) no-repeat bottom left; 
    padding-bottom: 10px; 
} 
 
.widgettitle { 
    background: url(images/rounded_top.gif) no-repeat top left; 
    padding: 10px 10px 0 10px; 
} 
 
.widget ul { 
    margin: 0 10px; 
    list-style: none; 
}

Code (markup):

I have managed to use this part of the code to make the bottom of the widget to work.

.widget { 
    background: #FF9900 url(images/rounded_bottom.gif) no-repeat bottom left; 
    padding-bottom: 10px; 
} 


.widget ul { 
    margin: 0 10px; 
    list-style: none;
}

Code (markup):

I used the CSS above in my style sheet like this.

#sidebar2 .widget  {
        background: #F7F7F7 url(images/rounded_bottom.gif) no-repeat bottom left;
	margin: 0px 0px 10px 0px;
	padding: 10px;
	border: 1px solid #3e1e00;

        }


#sidebar2 ul {
	list-style-type: none;
	margin: 0;
	padding: 0;

	}

	

Code (markup):

But I cant figure out what to do with this..

.widgettitle { 
    background: url(images/rounded_top.gif) no-repeat top left; 
    padding: 10px 10px 0 10px;
  
    } 

Code (markup):

Here is my site. http://michiganloanmodification.net/

 

Hi i checked your site, but seems like the style sheet is not applied there ....

 

hi
sorry ... it was slow connection... lol ..... i already check your site.... seems like you will apply the rounded corners on the right hand ( widget box ) will ya ?

ok :
you dont need the :
border: 1px solid #3e1e00; on the sidebar2 .widget because it will ruined the rounded corners.

also the you dont need the ul

------------------------------------------
.widgettitle <<< you need this to put it on the top section of the box.
------------------------------------------

eg.

<div class="widget">
<div class="widgettitle">&nbsp;</div>
<div class="widgetbody">some contents here</div>
</div>

the rounded image on top/bottom should be 10px height < you can see the padding top& bottom are set to 10px in css this is where the background image stay (or we could say this is a trick)

.widget {
width : 200px;
background: #FF9900 url(images/rounded_bottom.gif) no-repeat bottom left;
padding-bottom: 10px; /*
}

.widgettitle {
width : 100%;
background: url(images/rounded_top.gif) no-repeat top left;
padding: 10px 10px 0 10px;
}
.widgetbody{
width: 100%;
}

........
I hope it will make sense...

Regards,