Adding Rounded Corners

I've found the code for the rounded corners, but I don't know what files to add it to? Also, where in the file does it go?

You found the code for rounded corners (they are so pre-recession) and yet you don't know where it goes...

Okay, let me help you out a little here...

First, which corners would you like to round?

templates/tmpl_{tmpl}/css/filename.css is where it goes (meaning filename identifies the page, overall being general and/or anchor.css) and the specific spots depends on what you want to round.  You'll have to dig through it all to get it all set.  This is the reason most just buy a template and customize from there.  Lot of work to save $20 if you ask me...

Why do you say rounded corners are pre-recession? Do you know of a good site or place where I can find trends? Also, of all the templates available, I finally settled on the one that had the most features I was looking for. The only thing it didn't have was the rounded corners, I figured I'd just change them myself. Sounds like I'm in for a good time, huh? Thanks for the file info!

There's been a huge run for a couple years now on doing rounded corners.  It's basically become just another standard where it was uniquen. 

As far as adding them, yeah, if your going to add them to your template instead of getting one with them, your in for a real fun time.  Especially since the preferred way of doing it in Dolphin is to use split images and match them up to enable the auto width function with all the boxes being different widths.  Enjoy.

since I dont care what things look like in IE lol JK

open general.css

and compare

.topMenu td a {

-webkit-border-radius: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
}



.topMenu td a:link,  .topMenu td a:visited,  .topMenu td b {

display: block;
line-height: 22px;
height: 22px;
background-image: url(../images/nav.jpg) !important;
color:#333399;
-webkit-border-radius: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
}

.topMenu td a:hover, .topMenu td a:active, .topMenu td b {
color: #fff;
background-image: url(../images/sub.jpg)  !important;
-webkit-border-radius: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
}

bolded rounds things out nice for the other