CSS → Borders
The area sorounding every element in an HTML document can be defined as a rectangular box which has a content area surrounded by padding, a border and margins.
The border properties specify the width, color, and style of the border area of a box. These properties apply to all elements.
There are three properties you can change on your borders:
border-color
border-style
<div style="border:1px #000 solid; padding:15px">
border-width
<br>border-color
<br>border-style
</div>
the longer version of the above code:
<div style="border-width:1px; border-color:#000; border-style:solid; padding:15px">
border-width
<br>border-color
<br>border-style
</div>
For the width of the border, other than using pixels measurments you may use one of the following values:
- border:thin
- border:medium
- border:thick
Border Style
Border style are a bit more tricky. My advice would be to stick to the simples- solid.
- border:thin solid
- border:thin dashed
- border:thin dotted
- border:medium double
- border:thick groove
- border:thick ridge
- border:thick inset
- border:thick outset
- border:none
Taking sides
You may control all or part of the four sides of a border:
border-top
border-bottom
border-left
border-right
and the code...
<div style="width:250px; border-top:1px #000 solid;
border-left:thick #f00 dotted;
border-right:none;
border-bottom:13px #00f double;padding:15px">
<p>border-top
<br>border-bottom
<br>border-left
<br>border-right
</div>
Borders can be applied to all elements.