border

border: solid

一本線

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <style>
        .a {
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 50px;
            background-color:#FFF;
            border:solid 10px #0000ff;
            border-radius:10px;
        }
    </style>
</head>
<body>
    <div class="a">foo</div>
</body>
</html>

f:id:hrt0kmt:20140712145730p:plain

border: inset

窪み陰付き

        .a {
            border:inset 10px #0000ff;
        }

f:id:hrt0kmt:20140712145323p:plain

border: groove

立体窪み

        .a {
            border:groove 10px #0000ff;
        }

f:id:hrt0kmt:20140712145842p:plain

border: ridge

立体隆起

        .a {
            border:ridge 10px #0000ff;
        }

f:id:hrt0kmt:20140712150053p:plain

border: outset

立体右に陰付き

        .a {
            border:outset 10px #0000ff;
        }

f:id:hrt0kmt:20140712150454p:plain

border: dashed

破線

        .a {
            border:dashed 10px #0000ff;
        }

f:id:hrt0kmt:20140712150626p:plain

border: dotted

点線

        .a {
            border:dotted 10px #0000ff;
        }

f:id:hrt0kmt:20140712150908p:plain

border-top: solid

        .a {
            border-top:solid 10px #0000ff;
        }

f:id:hrt0kmt:20140712151047p:plain