CSS Borders [#7]

CSS Borders [#7]

Postby omoi » Fri Jul 13, 2007 5:05 pm

I thought this would be a nice, quick lesson everyone could enjoy.

In CSS, when you want to specify borders, there are a few ways to do them. As you know, since most "containers" on a web page are quandrangles (have four sides). Because of that - surprise - you can specify four borders.

Code: Select all
border-top:...;

border-left:...;

border-right:...;

border-bottom:...;


This gives you more control over the specific parts of your border. For example, if you wanted each border to be a different color or wanted two in one color and two in another color/thickness/type/etc....

If you want your border to be only one color, then you can just use this:

Code: Select all
border:...;


That makes all of the borders for that object look the same.

Now when you declare a border, you can have three possible attributes. The width, the type, and the color. You write them in the folowing format:

Code: Select all
border: width type color;


or in my case

Code: Select all
border: width type #hexcolor;


Now, let's talk about the possible things you can put in there!

For the border size or width, you can use the following:

thick
thin
[x]px


Although there is a border-width property, it can't be used alone. It has to be paired up with our next attribute. Also note that you are going to run into confusion if you use "thin" and "[x]px" in the same declaration; thin and thick are relative keyword for width. 3px is a more specific measurement. They don't go together, they replace each other. For example, if you were thinking "I don't know how big I want this to be, but it needs to be small...", then do something like:

Code: Select all
border: thin solid black;


On the other hand, if you know that you want a 2px border and only 2px will do, then by all means use:

Code: Select all
border: 2px solid black;


Writing something like:

Code: Select all
border: 2px thin black;


will make your validator cuss you out because "thin" is not a border-style property, but it's in the place where a border style is supposed to be.


The following are possible border types or styles. You can also set these using the border-style property.

dashed
solid
double
groove
ridge
inset
outset


finally, as you know you have plenty of colors you can specify.

If you don't fill in all three values, your browser will read what is there without mishap if you type it in the proper order (although your validator will dislike it).

Here are some random properties that you can use although it's very annoying:
border-top-color....
border-top-style....
border-top-width...


Apply to other sides. It could come in handy, but consider the great deal of ease in using other methods to make these declarations, I doubt you will touch these.
Image

Read the rules.
Check this topic and make your suggestions known!
This is how we make suggestions.
User avatar
omoi
Moderator Team
Moderator Team
 
Posts: 1076
Joined: Wed May 23, 2007 8:31 pm

Re: CSS Borders [#7]

Postby super3boy » Fri Jul 13, 2007 7:26 pm

Ok. Thanks. I didn't know all the border styles.
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA

Re: CSS Borders [#7]

Postby Tix'z » Sun Dec 02, 2007 4:49 pm

Nice one, you only "forgot" one thing...
And i mean only one thing, this is the best walkthrough I've ever seen!
you are only surpassed by W3C Schools(but no one can be better than them)

You can also set colour via. rgb(255 255 255) and i think that many "Photoshoppers" would find that helpfully :D

Regards from Denmark, Tix'z
Tix'z
Member
Member
 
Posts: 2
Joined: Sun Dec 02, 2007 4:41 pm

Re: CSS Borders [#7]

Postby super3boy » Fri Dec 07, 2007 9:32 pm

Yeah. I guess that would be helpful for people you use rgb. I always use hex.
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA

Re: CSS Borders [#7]

Postby Pixelated » Wed Dec 12, 2007 9:01 pm

Correct me if I'm wrong, but I don't believe all browsers support rgb(255, 255, 255). So it would be safer to use hex-codes.
Image
There once was a man named Bertold
Who drank beer when the weather grew cold
As he reached for his cup...
"NEEEEVER GONNA GIVE YOU UP!!!"
Oh, snap! You just got limerickrolled!
Pixelated
Member
Member
 
Posts: 493
Joined: Thu Jul 26, 2007 7:45 pm

Re: CSS Borders [#7]

Postby Roswell » Wed Dec 12, 2007 9:57 pm

Pixelated wrote:Correct me if I'm wrong, but I don't believe all browsers support rgb(255, 255, 255). So it would be safer to use hex-codes.

Some older browsers do not, and sometimes IE6 gets a bit wonky with it.
Roswell
Moderator Team
Moderator Team
 
Posts: 2631
Joined: Thu Jul 05, 2007 5:06 pm

Re: CSS Borders [#7]

Postby super3boy » Fri Dec 21, 2007 9:24 am

IE8 will meet the web standards. :D
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA

Re: CSS Borders [#7]

Postby Roswell » Fri Dec 21, 2007 12:47 pm

super3boy wrote:IE8 will meet the web standards. :D

No, the current build does. That doesn't mean IE8 final will.
Roswell
Moderator Team
Moderator Team
 
Posts: 2631
Joined: Thu Jul 05, 2007 5:06 pm

Re: CSS Borders [#7]

Postby super3boy » Fri Dec 21, 2007 5:41 pm

Read up buddy.

Can you make some more css tutorials omoi?
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA

Re: CSS Borders [#7]

Postby omoi » Thu Jan 03, 2008 10:00 am

Roswell wrote:
Pixelated wrote:Correct me if I'm wrong, but I don't believe all browsers support rgb(255, 255, 255). So it would be safer to use hex-codes.

Some older browsers do not, and sometimes IE6 gets a bit wonky with it.


Duly noted, but as a rule, I would rather use hex for colors since most people don't know as much about rgb numbers (although you are correct; they can be used). Also, I don't think it's just an IE issue; rgb numbers aren't as happily processed in browsers in general and sometimes gets processed differently (thanks, Ros).

Finally, sure super3. As soon as I have a moment, I'll think of some new CSS thing we can work out.

Miss you, guys.
Image

Read the rules.
Check this topic and make your suggestions known!
This is how we make suggestions.
User avatar
omoi
Moderator Team
Moderator Team
 
Posts: 1076
Joined: Wed May 23, 2007 8:31 pm

Next

Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest