Page 1 of 1

css/DIV/Style & Borders Rate Topic: -----

#1 no2pencil  Icon User is online

  • Admiral Fancy Pants
  • member icon

Reputation: 5392
  • View blog
  • Posts: 27,387
  • Joined: 10-May 07

Post icon  Posted 22 April 2008 - 10:39 PM

css/DIV/Style & Borders:

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;



Is This A Good Question/Topic? 0
  • +

Page 1 of 1