Six ways of making a border.

.strangeborders { width:320px; height:60px; border-top:2px solid blue; border-right:2px solid blue; border-left:2px solid blue; border-bottom:15px double blue; padding:32px; border-radius:64px 64px 32px 32px; }

Borders

Here are some boxes with a border.
You find six different border types.

A 1 pixel wide solid border in blue:

A 5 pixel wide double border in blue:

A 2 pixel wide dotted border in blue:

A 2 pixel wide dashed border in blue:

A 12 pixel wide gradient border:

A strange border in blue

HTML


<DIV class='solid'>A 1 pixel wide solid border in blue:</DIV>


<DIV CLASS='double'>A 5 pixel wide double border in blue:</DIV>


<DIV CLASS='dotted'>A 2 pixel wide dotted border in blue:</DIV>


<DIV CLASS='dashed'>A 2 pixel wide dashed border in blue:</DIV>


<DIV CLASS='gradient'>A 12 pixel wide gradient border:</DIV>


<DIV CLASS='strangeborders'>A special border of my own fantasy and imagination:</DIV>

CSS

.solid { 
    width:320px;
    height:60px;
    border:1px solid blue;
}
.double {
    width:320px;
    height:60px;
    border:5px double blue;
}
.dotted { 
    width:320px;
    height:60px;
    border:2px dotted blue;
}
.dashed {
    width:320px;
    height:60px;
    border:2px dashed blue;
}
.gradient { 
    width:300px;
    height:60px;
    border:12px solid transparent;
    border-image: linear-gradient(to bottom, lightblue, blue);
    border-image-slice:1;
}
.strangeborders {
    width:320px;
    height:60px;
    border-top:2px solid blue;
    border-right:2px solid blue;
    border-left:2px solid blue;
    border-bottom:15px double blue;
    padding:32px;
    border-radius:64px 64px 32px 32px;
}