HTML
HTML5
HTMLタグ
スマートフォン
CSS
CSSプロパティ
CSS・HTML便利ツール
HTML色見本
配色組み合わせツール
特殊文字
JAVA
Android
PHP
Smarty修飾子
EXCEL
*このページは web-dou.com のアーカイブです。(2025年 サイト統合)
WEB技術の辞書・解説・使用例
TOP
>
CSS
>
CSS辞典
> outline
outline
アウトライン
ボーダー
アウトライン(縁取り)のスタイル・太さ・色を指定する。
X
B!
FB
LINE
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;" />
チェックボックス