css border style
/*
* border-style:
solid: A solid, continuous line.
none (default): No line is drawn.
hidden: A line is drawn, but not visible. this can be handy for adding a little extra width to an element without displaying a border.
dashed: A line that consists of dashes.
dotted: A line that consists of dots.
double: Two lines are drawn around the element.
groove: Adds a bevel based on the color value in a way that makes the element appear pressed into the document.
ridge: Similar to groove, but reverses the color values in a way that makes the element appear raised.
inset: Adds a split tone to the line that makes the element appear slightly depressed.
outset: Similar to inset, but reverses the colors in a way that makes the element appear slightly raised.
*/
/* Example using the typical solid border-style */
div {
border: 1px solid #4e1f9d;
}p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;} div {
border-style: dotted;
}.bordersA {
/* Singe rule. Adds a 1px black solid border */
border: 1px solid #000000;
}
/* Multi rule for better width control */
.bordersB {
border-color: #000000;
border-style: solid;
/* TOP & BOTTOM: 5px, LEFT & RIGHT: 20px */
border-width: 5px 20px;
/* OR - TOP: 5px, RIGHT: 20px, BOTTOM: 10px, LEFT: 15px */
border-width: 5px 20px 10px 15px;
}
/* Specific rules for even further width, style & color control */
.borderTopWarning {
/* Replace `top` with `right`, `bottom` or `left` */
border-top-color: #b52e2e;
border-top-style: dashed;
border-top-width: 3px;
}h1 {
border: 5px solid red;
}hr {
border:none;
border-top:1px dashed #f00;
color:#fff;
background-color:#fff;
height:1px;
width:50%;
}