WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > outline
outline  アウトライン  ボーダー 

アウトライン(縁取り)のスタイル・太さ・色を指定する。

このエントリーをはてなブックマークに追加

borderプロパティと似ていますが、outlineプロパティには上下左右の個別指定はありません。

書式

outline: 太さ スタイル 色 ; (例) outline : 1px solid red ;

パラメーター

●太さ
・数値+単位で指定。 (例)3px 2em
・キーワードで指定。 (例)thin(細い)、medium(普通)、thick(太い)

●スタイル
・none 非表示・太さ0。
・hidden 非表示・太さ0。
・solid 1本線。
・double 2本線。
・dashed 破線。
・dotted 点線。
・groove 立体的に窪んだ線。
・ridge 立体的に隆起した線。
・inset 立体的に窪んだ線。
・outset 立体的に隆起した線

●色
・#000000 といったカラーコードや redやblueといったカラーネームで色指定。
・transparent 透明。

サンプルコード

<div style="outline:solid 3px red;">あいうえお</div>
<p style="outline:dashed 1px #ccc;">あいうえお</p>
あいうえお

あいうえお


サンプルコード

<input type="text" name="name" size="30" style="outline:outset 3px green;" />
<input type="radio" name="gakunen" value="1年生" style="outline:double 3px orange;" />チェックボックス
<input type="button" value="ボタン" style="outline:solid 3px #00ff00;" />
チェックボックス