iPentec.com / Doc / CSS

border と outline の違い - CSS

CSSのborder と outline の違いを紹介します。

概要

領域の外側に境界線を描画するプロパティには border と outline の2つのプロパティがあります。 2つのプロパティの違いを紹介します。

実装例1

コード

下記のHTML、CSSファイルを作成します。

border-and-outline.css

body {
  margin:0;
  padding:0;
}

.frame01 {
  width: 180px;
  height: 64px;
  border: 4px solid #ff6a00;
  outline: 4px solid #006ab6;
}

border-and-outline.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="border-and-outline.css" />
</head>
<body>
  <div class="frame01">
    枠です。
  </div>
</body>
</html>

解説

div枠にframe01クラスを設定します。CSSでframe01クラスに border と outline プロパティを設定します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
outlineの枠は左側と上側が表示されていないことがわかります。bodyのmarginプロパティが0であり、枠のmarginプロパティも0のため、画面の境界の上部と左側のoutline枠が画面の外側に描画されているため、画面には表示されない動作になります。

実装例2

CSSファイルを下記に変更します。frame01のmarginを設定します。

border-and-outline.css

body {
  margin:0;
  padding:0;
}

.frame01 {
  margin:10px;
  padding:0; 
  width: 180px;
  height: 64px;
  border: 4px solid #ff6a00;
  outline: 4px solid #006ab6;
}

表示結果

変更後のHTMLページの表示結果です。marginプロパティが設定されたため、outlineの枠の左側と上側も画面に表示される状態になります。

実装例3

CSSファイルを下記に変更します。frame01のmarginとpaddingを設定します。

border-and-outline.css

body {
  margin:0;
  padding:0;
}

.frame01 {
  margin:10px;
  padding:10px; 
  width: 180px;
  height: 64px;
  border: 4px solid #ff6a00;
  outline: 4px solid #006ab6;
}

表示結果

変更後のHTMLページの表示結果です。

枠の大きさと基準の位置

先の表示結果から、枠の描画の左上の基準位置はborder枠の左上角になることがわかります。また、outline の枠は枠の外側に表示されるため、marginプロパティで設定したマージンはコンテンツの枠からborderの枠の間の余白として設定されます。
枠の全体の大きさは、以下の大きさになります。

outline(left)の線幅 + boder(left)の線幅 +　padding-left の幅 + width の幅 + padding-right の幅 + border(right)の線幅 + outline(right)の線幅

outline(top)の線幅 + boder(top)枠の線幅 +　padding-top の高さ + height の高さ + padding-bottom の高さ + border(bottom)の線幅 + outline(bottom)の線幅

補足

outlineプロパティには境界線をデフォルトの位置から内側や外側に描画するためのoutline-offset プロパティがあります。詳しくはこちらの記事を参照して下さい。

補足

box-sizing: border-box; が指定されている場合のwidth height の寸法はこちらの記事を参照してください。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

border と outline の違い - CSS

概要

実装例1

コード

解説

表示結果

実装例2

表示結果

実装例3

表示結果

枠の大きさと基準の位置

関連するページ