Using standard HTML, your choice for border is limited, & can be pretty boring! You can change the color, the thickness, & that is about it.
However, with the use of stylesheets, you have much more of a variety of borders to implement onto your webpage.
There are three css settings you can change on your borders:
border-width
border-color
border-style
Most of the time you will only affect these attributes with 1 simple reference to the border attribute, however it is worth noting you can set these attributes individually.
As well, you will override anything that you have previously defined in a stylesheet since there is no order rule for these attributes.
Here's an example:
<div style="border: 3px coral solid;">text</div>
To affect specific sides, use the following attributes:
border-top border-left border-bottom border-right
Using these you can force individual borders to display differently, or not at all.
<div style="border: red 4px dashed; border-bottom: blue 4px solid; border-top-style: ridge;">text</div>
border-width
This value can be assigned in pixels or you can use one of the three standard values thin, medium and thick.
border-width: thin; border-width: medium; border-width: thick;
border-style
This value allows you to adjust how your borders are presented. There are a total of eight possible styles you can choose from:
border-style: solid; border-style: dashed; border-style: dotted; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset;
Lastly, one that should be familiar to you...
border-color
You can color your borders using either HEX codes or named colors.
border-color: black; border-color: 000000;





MultiQuote


|