CSS Tutorial - Borders - border-shorthand

border-shorthand: border-left, border-right, border-top, border-bottom

So far there's still something boring: All borders look the same, and that can be changed, too:

border-left:solid black 4px; border-right:dashed green 4px; border-top:dotted #FFFF00 4px; border-bottom:none;

We don't use the 'border' property here, we talk to each individual border separately. The parameters we can give are the same as for the 'border' property: <look> <color> <width>
Also we can give the parameter 'none' if we don't want a border at that place (works with border:none; too, if you don't want any border at all). But, as I said, borders are not just for images, there's more to them. You have been looking for the past hours (?) at borders around boxes containing text: The examples in their white boxes always have a dark border around it.

						This here is a <div> with the following style:

						border:solid red 5px;

You can also use borders to just underline elements! Like here:

XHTML and CSS, a little tutorial for beginners

The relevant style attached to that div: border-bottom:dashed blue 4px;

							Or you could do something like this, you have a paragraph, and to freshen it up a little bit, 
							among other things you can add a line to the left, if you feel like. Or a double line?

						Let's use this style: border-left:double green 4px;

One last example and then we put the borders to rest for a while:

							A
						
						Isn't that neat? ☺

						the code for that is this:

						border-bottom:solid #C15C54 25px; 

						border-top:solid transparent 25px; 

						border-left:solid transparent 25px; 

						border-right:solid transparent 25px; 

						The trick is, to address all four borders, but make the other three 'transparent'.

						(IE users might have to use the color of the background for those 3 borders, IE doesn't always like 'transparent', but why would you use IE anyway???)

You can see, borders are very important designing the pages, there's more to it than just the colored border around a linked image...

Something to play with again, type in commands like 'solid green 5px':