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.
