HTML5 - Regole CSS per gestire i bordi

Stili per i bordi

Regola CSS, stile bordo: dotted

.box-1 {float:left; width: 400px; height: 200px;
margin-left: 30px; padding: 10px;
border: 5px dotted #002c53; margin-bottom: 10px; background: #568ec0; }

dashed

.box-2 {float:left; width: 400px; height: 200px;
margin-left: 30px; padding: 10px;
border: 5px dashed #002cff; margin-bottom: 10px; background: #568ec0; }

solid

.box-3 {float:left; width: 400px; height: 200px;
margin-left: 30px; padding: 10px;
border: 5px solid #002c53; margin-bottom: 10px; background: #568ec0; }

double

.box-4 {float:left; width: 400px; height: 200px;
margin-left: 30px; padding: 10px;
border: 5px double #002c53; margin-bottom: 10px; background: #568ec0; }

groove

.box-5 {float:left; width: 400px; height: 200px;
margin-left: 30px; padding: 10px;
border: 10px groove #002c53; margin-bottom: 10px; background: #568ec0; }

ridge

.box-6 {float:left; width: 400px; height: 200px;
margin-left: 30px; padding: 10px;
border: 10px ridge #002c53; margin-bottom: 10px; background: #568ec0; }

inset

.box-7 {float:left; width: 400px; height: 200px;
margin-left: 30px; padding: 10px;
border: 10px inset #002c53; margin-bottom: 10px; background: #568ec0; }

outset

.box-8 {float:left; width: 400px; height: 200px;
margin-left: 30px; padding: 10px;
border: 10px outset #002c53; margin-bottom: 10px; background: #568ec0; }

radius + inset

.box-9 {float:left; width: 400px; height: 200px;
margin-left: 30px; padding: 10px;
border: 10px inset #002c53;
border-radius: 30px;
margin-bottom: 10px; background: #568ec0; }

radius-top-left

.box-10 {float:left; width: 400px; height: 200px;
margin-left: 30px; padding: 10px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
margin-bottom: 10px; background: #568ec0; }