Need help with CSS, adding a border

[CircleOfLinks]

Hey guys,

I've just purchased a template and I need to add a border to the styles.css, im not familiar with it, can someone help? I've attached the actull contects of style.css. I want the border to be in red and have rounded edges, I want the border to be the out side of the site.

Can any one help?

here is the code

//////////////////////////////////////////////


td, table{
font-family:verdana;
font-size:9px;
vertical-align:top;
line-height:12px;
color:#7F7F7F;

}


form { margin:0px; padding:0px}
body { margin:0px; padding:0px; background-color: #FFFFFF}

a { color:#E93400; text-decoration:none}
a:hover{ text-decoration:underline}

span a { color:#E93400; text-decoration:underline}
span a:hover{ text-decoration:none}

.list ul{margin:0px; padding:0px; list-style:none; line-height:19px;}
.list ul li{ background:url(images/list_marker.gif) no-repeat left top; padding:0 0 0 10px}
.list ul li a{ color:#E93400; text-decoration:underline}
.list ul li a:hover{text-decoration:none}

.policy{ color:#7F7F7F}
.policy a{ color:#000000; text-decoration:none}
.policy a:hover{ text-decoration:underline}

span{ color:#000000}

strong a{ font-size:10px}

strong{ font-size:10px}
b{ color:#E93400}

.form input {
width:191px;
height:21px;
font-family:verdana;
font-size:9px;
color: #7F7F7F;
padding:2 0 0 6px;
border-color:#D5D5D5;
border-style:solid;
border-width:1px;
background-color:#F8F8F8
}

.form textarea {
width:191px;
height:102px;
font-family:verdana;
font-size:9px;
color:#7F7F7F;
overflow:hidden;
padding:2 0 0 6px;
border-color:#D5D5D5;
border-style:solid;
border-width:1px;
background-color:#F8F8F8
}

////////////////////////////

thanks heaps

[Boogle]

Erm, the rounded edge thing is usually a picutre mate. Therefore you do all the work for it in photoshop or something of the like and then save it as a jpeg/gif and then load in the image in an element such asa <div></div>

Check here for an example. BUT DO NOT use tables like this guy does, instead use your imagination and convert it to <div></div>'s!

HTH's.

Boog's.

[Jesse Vlasveld]

Here are some examples of ways to get rounded corners with css.
There is no 'border' element which let's you create a rounded border, so something like this is definately the way to go.

[Boogle]

Here are some examples of ways to get rounded corners with css.
There is no 'border' element which let's you create a rounded border, so something like this is definately the way to go

Forgive me, but i think that's far too much styling to get rounded borders. I can do the same thing in about 100x less lines of code!

HTML:

<div><img src="yourtoproundedcorners.gif/jpg" alt="" /></div>
<div class="middlebackground">CONTENT IN HERE</div>
<div><img src="yourbottomroundedcorners.gif/jpg" alt="" /></div>

CSS:

.middlebackground{background: url(yourimagepath/bg.gif/jpg) repeat-y;}

There done. and it works in all browsers too, this is the method i use.

I'll admit it has a draw back and that's that you have to add padding/margins to get the content to sit right- but not always, it depends what your displaying within the content.

IMO you're just going to get people copying that code and not really knowing what it's doing. There's a lot of CSS styling there that could become useless for browsers like FF/IE when they update their schemas and then the CSS requirements are different etc...

Just what i think!

EDIT:
P.S. just want to say though, for those that take the time to read and understand what jesse posted, then it's a really nice technique and could make you understand some CSS techniques better. Thanks for the link, Jesse!
Boog's

[Jesse Vlasveld]

It's more styling yes.. but it's a technique that doesn't require any imaging, which could be very usefull in particular cases. And something I personally prefer.
Ofcourse using images is a method of achieving about the same result.

And about people just copying the code and saving themselves the whole learning proces.. You're right, there will probably be 75% that will be lazy and copy and paste the codes and get exactly the same result as cssplay, however if they want to adjust anything they will have to look into the code and they will probably mess everything up because they don't have the faintest clue about what they are doing.
I just linked to this method because I think it's pretty awesome, and in my case a pretty good learning experience.

Originally Posted by Boogle

Forgive me, but i think that's far too much styling to get rounded borders. I can do the same thing in about 100x less lines of code!

HTML:

<div><img src="yourtoproundedcorners.gif/jpg" alt="" /></div>
<div class="middlebackground">CONTENT IN HERE</div>
<div><img src="yourbottomroundedcorners.gif/jpg" alt="" /></div>

CSS:

.middlebackground{background: url(yourimagepath/bg.gif/jpg) repeat-y;}

There done. and it works in all browsers too, this is the method i use.

I'll admit it has a draw back and that's that you have to add padding/margins to get the content to sit right- but not always, it depends what your displaying within the content.

IMO you're just going to get people copying that code and not really knowing what it's doing. There's a lot of CSS styling there that could become useless for browsers like FF/IE when they update their schemas and then the CSS requirements are different etc...

Just what i think!

EDIT:
P.S. just want to say though, for those that take the time to read and understand what jesse posted, then it's a really nice technique and could make you understand some CSS techniques better. Thanks for the link, Jesse!
Boog's

[Boogle]

Yes i agree with what you say, I have tried that technique this morning and toyed with it a bit, and it's actually a nice attractive, clean looking technique, so thanks for that!

Boog's

[Jesse Vlasveld]

No problem at all, isn't css awesome