HTML and CSS Reference
In-Depth Information
When the reader's mouse hovers over the irst link in the list, a medium
border is drawn around it. However, this border takes up an additional num-
ber of pixels on the right and let of the link and pushes the second link to the
right. Coding this
li a { border-style: hidden; }
doesn't help. he following CSS is needed to toggle the link borders on and of
without shiting the following elements to the right:
li a { border-style: solid; border-color: transparent; }
li a:hover { border-style: solid; border-color: black; }
he border property is a shorthand method for setting color, style, and width
in one statement. he ordering does not matter. For example:
div.greeting { border: 2px solid rbg(220,240,250); }
#sidebar .widget { border: white dotted; }
#main .button { border: #456 3px outset; }
Each of the four sides of an HTML block element has its own set of border
properties by using one of the following:
border-top-width
border-top-color
border-top-style
border-right-width
border-right-color
border-right-style
border-bottom-width
border-bottom-color
border-bottom-style
border-left-width
border-left-color
border-left-style
A shorthand notation can also be used. he border-width , border-style , and
border-color properties can each take up to four values to specify the values for
the top, right, bottom, and let borders, respectively. Also, the four properties
border-top , border-right , border-bottom , and border-left can use the same
shorthand notation as the border property. Here are some examples:
p { border-right: thin solid gray; }
p { border-style: none none solid none; } /* just a bottom border */
p { border-color: red blue; }
Highlighting elements that you want to draw attention to by giving
them borders is a nice touch. But borders with rounded corners are cool!
CSS3 includes the border-radius property for this purpose. Currently, the
 
Search WWH ::




Custom Search