outline-style

アウトラインの線種を指定します。

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


ブラウザ

O7 / O9 / Fx2 / IE5 mac

▲PageTop

書式

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

▲PageTop

指定できる値

値 初期値 意味
none ○ 線のスタイルはありません。
solid 実線になります。
double 二重線になります。
dashed 破線になります。
dotted 点線になります。
groove 窪みのような線になります。
ridge 隆起したような線になります。
inset 凹みに見える線になります。
outset 凸に見える線になります。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
      outline-style : none;
      outline-color : #cccc00;
      outline-weight : bold;
      }
      #sample2 {
      outline-style : solid;
      outline-color : #cccc33;
      outline-weight : bold;
      }
      #sample3 {
      outline-style : double;
      outline-color : #cccc66;
      }
      #sample4 {
      outline-style : dashed;
      outline-color : #cccc99;
      }
      #sample5 {
      outline-style : dotted;
      outline-color : #cccccc;
      }
      #sample6 {
      outline-style : groove;
      outline-color : #ccccff;
      }
      #sample7 {
      outline-style : ridge;
      outline-color : #ffccff;
      }
      #sample8 {
      outline-style : inset;
      outline-color : #ffcccc;
      }
      #sample9 {
      outline-style : outset;
      outline-color : #ffcc99;
      }
      #sample div {
      float:left;
      margin : 15px;
      padding:5px;
      width:200px;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      <div id="sample1">outline-style : none</div>
      <div id="sample2">outline-style : solid</div>
      <div id="sample3">outline-style : double</div>
    </div>
    <br style="clear : left;">
    <div id="sample">
      <div id="sample4">outline-style : dashed</div>
      <div id="sample5">outline-style : dotted</div>
      <div id="sample6">outline-style : groove</div>
    </div>
    <br style="clear : left;">
    <div id="sample">
      <div id="sample7">outline-style : ridge</div>
      <div id="sample8">outline-style : inset</div>
      <div id="sample9">outline-style : outset</div>
    </div>
    <br style="clear : left;">
  </body>
</html>

表示結果

outline-style : none
outline-style : solid
outline-style : double

outline-style : dashed
outline-style : dotted
outline-style : groove

outline-style : ridge
outline-style : inset
outline-style : outset

▲PageTop

関連項目

CSS

outline / outline-color / outline-width

▲PageTop

▲