https://style.potepan.com/articles/20592.html から引用：
<![CDATA[
<head>
<style>
.border {
width: 200px;
padding: 10px;
margin: 20px;
}
.border-solid {
border: 3px solid #ff6347;
}
.border-double {
border: 3px double #0000ff;
}
.border-groove {
border: 10px groove #ffa500;
}
.border-ridge {
border: 10px ridge #008000;
}
.border-inset {
border: 10px inset #ffd700;
}
.border-outset {
border: 10px outset #ff1493;
}
.border-dashed {
border: 5px dashed #00bfff;
}
.border-dotted {
border: 5px dotted #dc143c;
}
</style>
</head>
<body>
<div class="border border-solid">1本線で表示します</div>
<div class="border border-double">2本線で表示します</div>
<div class="border border-groove">立体的にくぼんだ線で表示します</div>
<div class="border border-ridge">立体的に隆起した線で表示します</div>
<div class="border border-inset">内側全体がくぼんだ線で表示します</div>
<div class="border border-outset">内側全体が隆起した線で表示します</div>
<div class="border border-dashed">破線で表示します</div>
<div class="border border-dotted">点線で表示</div>
</body>
]]>
1本線で表示します
2本線で表示します
立体的にくぼんだ線で表示します
立体的に隆起した線で表示します
内側全体がくぼんだ線で表示します
内側全体が隆起した線で表示します
破線で表示します
点線で表示
|