CSS 101

Borders

You can put a border around almost anything, from a single character, to an image, to a section of a page. Borders can be of any thickness and any color, and can be solid, dotted, or dashed. If you use border: by itself, the border will go around all four sides of the element. Or you can use border-top:, border-left: and so on to control each side of the border independently. You can can consolidate all of the attributes of the border into a single command by separating the attributes with spaces.

Usage examples:
p {
    border:1px solid #66FFFF;
}

That will give a consistent border on all four sides of an element. For more control, use:

p {
    border-top:3px solid #66FFFF;
    border-right:5px solid #6F0000;
    border-left:2px dotted #625C99;
    border-bottom:5px dashed #99514E;  
}

The example above would look like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

That's ugly as sin, but illustrates the flexibility you get with border attributes. A more elegant, real-world implementation might be a subtle 1px dotted border around a blockquote, like this:

blockquote {
    background-color:#DBDBDB;
    color:#3C3C3C;
    padding:10px;
    border:1px dotted #3C3C3C;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

More info

Add your comment

Login to post a comment.