CSS_ border

 

ボーダーの 種類大きさまとめて指定する際に使用。

  • 指定する順序任意
  • スペース区切る

border プロパティでは、上下左右バラバラに指定できない
それぞれ異なったものにする場合は、
border-top、boder-bottom、boder-left、boder-right
または boder-style、boder-width、boder-color で指定する。

 

ex )

以下のようなスタイルを指定する。

f:id:koshinRan:20170819140018j:plain

 

CSS で指定

CSS

.borderTest {
 border: double 3px #008000;
}

 

HTML

<!DOCTYPE html>
<html lang="jp">
<head>
 <meta charset="UTF-8">
 <title>test</title>
 <link rel="stylesheet" type="text/css" href="CSS.css" />
</head>


<body>

 <div class="borderTest">
    この話が私の夢か私の一時的狂気の幻でなかったならば、<br/>
    あの押絵と旅をしていた男こそ狂人であったに相違ない。
 </div>

</body>
</html>

 

HTML で直接指定

HTML

 <div style="border: double 3px #008000;">
    この話が私の夢か私の一時的狂気の幻でなかったならば、<br/>
    あの押絵と旅をしていた男こそ狂人であったに相違ない。
 </div>

 

 

こちらから。
http://www.htmq.com/style/border.shtml

 

以上。

---Memo---
太さの単位
px:1 ピクセルを 1 とする。
em:フォントの高さを 1 とする。
ex:小文字 x の高さを 1 とする。