outline-widthプロパティ

TOPページに戻る > CSS

スポンサード リンク

outline-widthプロパティ

outline-widthプロパティは、輪郭線の太さを指定できます 枠線のさらに外に輪郭線をつけることができます
この輪郭線は、border要素とは違い、要素の幅や高さに影響しません
全要素に適用可能ですが、フォーム関係に使われることが多いです
outline-widthプロパティを使う時はoutline-styleプロパティで輪郭線の種類を指定してください。outline-styleプロパティの初期値がnoneなのでoutline-styleプロパティで輪郭線の種類を指定しないと輪郭線が表示できません
※IE6、IE7が未対応、IE8から対応しています

使い方(書式)

セレクタ { outline-width: 値; }                                    

outline-widthプロパティ

対応ブラウザ ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
単位 px、emなどの単位
thin 細い枠線
medium 標準の太さの枠線。これが初期値
thick 太い枠線

実際の指定方法

.hoge {
 outline-width: 1px;     /* pxでアウトラインの太さを指定  */
 outline-style: solid;   /* アウトラインの種類を指定  */
 outline-color: #FF6600; /* アウトラインの色を指定 */
 margin-bottom: 20px;    /* 下のマージンを20pxに指定 */
 width: 200px;           /* 要素の幅を200pxに指定 */
  }
.hoge2 {
 outline-width: medium;   /* キーワードでアウトラインの太さを指定 */
 outline-style: solid;   /* アウトラインの種類を指定 */
 outline-color: #FF6600; /* アウトラインの色を指定 */
 width: 200px;           /* 要素の幅を200pxに指定 */
  }

html部分

<form>
<textarea class="hoge">outline-width: 1px;</textarea>
</form>
<form>
<textarea class="hoge2">outline-width: medium;</textarea>
</form>

実際の表示





(C)2012 ホームページ作成無料