CSS borders...need help

[nd4rk]

Hi all,
I am having difficulties creating rounded edges on my borders.
This is the CSS code I have so far:

.sliderbutton img {cursor: pointer}
.sliderbutton img:hover {background:#666}
#slider {float:left; position:relative; overflow:auto; width:689px; height:181px; border:5px solid #000000; background:#fff}
#slider ul {position:relative; list-style:none; top:0; left:0}
#slider li {float:right; width:689px; height:181px; padding-right: px}

.pagination {float:center; list-style:none; height:50px; margin:0px 0 0 0px}
.pagination li {float:right; cursor: pointer; padding:1px 1px; background:#666; border:0px solid #999; margin:100 0px 0 ; text-align:center; color:#222}
.pagination li:hover {background:#777; border:1px solid #bbb; color:#000}
li.current {border:0px solid #f0f0f0; background:#000000}

li#content {width:689px; height:181px; padding:7px 7px 7px 7px}
#content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}

I have little experience in CSS and this was all coded with the help of my friend. I would be very grateful for anyones help

[skywalker2208]

You can either use an image to create rounded corners or you can use border-radius, but it doesn't work in IE8 and below.
http://www.quirksmode.org/css/contents.html
http://www.css3.info/preview/rounded-border/

[nd4rk]

#wrapper {width:689px; margin:181px auto}
#wrapper {-moz-border-radius: 15px; border-radius: 15px;}

.sliderbutton {float:left; width:200px;}
.sliderbutton img {cursor:pointer}
.sliderbutton img:hover {background:#666}
#slider {float:left; position:relative; overflow:auto; width:689px; height:181px; border:0px solid #fff; background:#fff}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:689px; height:181px; padding-right:0px}

.pagination {float:right; list-style:none; height:1px; margin:0px 0 0 0px}
.pagination li {float:left; cursor:pointer; padding:0px 0px; background:#ffffff; border:0px solid #999; margin:100 0px 0 ; text-align:center; color:#222}
.pagination li:hover {background:#777; border:1px solid #bbb; color:#000}
li.current {border:1px solid #ccc; background:#888}

li#content {width:689px; height:181px; padding:0px 0px 0px 0px}
#content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}

is this the correct way of implementing this code

{
-moz-border-radius: 15px;
border-radius: 15px;
}

im having problems...someone please show me how its done

[Janis-php]

The same code just a little fuller

{
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox */
}

[nd4rk]

Thank you!!!

[skywalker2208]

Don't forget about -webkit-border-radius for Safari and Chrome.

[Janis-php]

I hope that you will find the CSS 3

[nd4rk]

will do, thank you once again.
end result so far
www.nd4rk.comli.com