Código Html :)
<!DOCTYPE html><html lang="pt-br">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div id="um"> <p>Borda dotted</p> </div>
<div id="dois"> <p>Borda dashed</p> </div>
<div id="tres"> <p>Borda solid</p> </div>
<div id="quatro"> <p>Borda groove</p> </div>
<div id="cinco"> <p>Borda double</p> </div>
<div id="seis"> <p>Borda ridge</p> </div>
<div id="sete"> <p>Borda inset</p> </div>
<div id="oito"> <p>Borda outset</p> </div>
</body>
</html>
-----------------------------------------------------------------------------------------
Folha de estilo : )
body{
background-color:#DABD95;
}
div{
display:inline-block;
margin: 20px;
}
#um{
background-color:#915B51;
height: 100px;
width: 100px;
border: 8px dotted #EDC844;
text-align: center;
color: #fff;
}
#dois{
background-color:#915B51;
height: 100px;
width: 100px;
border: 8px dashed #EDC844;
text-align: center;
color: #fff;
}
#tres{
background-color:#915B51;
height: 100px;
width: 100px;
border: 8px solid #EDC844;
text-align: center;
color: #fff;
}
#quatro{
background-color:#915B51;
height: 100px;
width: 100px;
border: 8px groove #EDC844;
text-align: center;
color: #fff;
}
#cinco{
background-color:#915B51;
height: 100px;
width: 100px;
border: 8px double #EDC844;
text-align: center;
color: #fff;
}
#seis{
background-color:#915B51;
height: 100px;
width: 100px;
border: 8px ridge #EDC844;
text-align: center;
color: #fff;
}
#sete{
background-color:#915B51;
height: 100px;
width: 100px;
border: 8px inset #EDC844;
text-align: center;
color: #fff;
}
#oito{
background-color:#915B51;
height: 100px;
width: 100px;
border: 8px outset #EDC844;
text-align: center;
color: #fff;
}
-------------------------------------------------------------------------------------------------------------------------
Resultado:
Print da tela :D
