outline-width

アウトラインの太さを指定します。

※アウトラインとは要素の輪郭を表すものです。ボーダーと違って、要素の配置や余白に影響を与えません。


ブラウザ

O7 / O9 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ outline-width : 値; }

▲PageTop

指定できる値

初期値 意味
数値+単位 太さを指定します。単位例:px,em,ex,%
thin 細い線になります。
medium thinより太く、thickより細い線になります。
thick 太い線になります。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        outline-width : 5px;
        outline-color : #cc9966;
      }
      #sample2 {
        outline-width : thin;
        outline-color : #cc9999;
      }
      #sample3 {
        outline-width : medium;
        outline-color : #cc99cc;
      }
      #sample4 {
        outline-color : #cc99ff;
        outline-width : thick;
      }
      #sample span {
        outline-style : solid;
        margin : 10px;
        padding :5px;
      }
    </style>
  </head>
  <body>
    <p id="sample">
      <span id="sample1">outline-width : 5px</span>
      <span id="sample2">outline-width : thin</span>
      <span id="sample3">outline-width : medium</span>
      <span id="sample4">outline-width : thick</span>
    </p>
  </body>
</html>

表示結果

outline-width : 5px outline-width : thin outline-width : medium outline-width : thick

▲PageTop

関連項目

CSS

outline / outline-color / outline-style

▲PageTop