[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック

ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。

サイトのキャプチャ

Body Border, Rounded Inside

Step 1: ページ全体を角丸で囲む(スクロール非対応)

まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。

基本的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。

サイトのキャプチャ

角丸用の画像

コードを見てみましょう。

HTML

HTMLは、bodyだけで構いません。

<body>
  <h1>Rounded inside body border</h1>
</body>

CSS

上記の画像をborder-imageに使用します。

body {
  border-image: url(rounded-edge.png) 25% repeat;
  border-width: 25px;
}
デモのキャプチャ

デモページ(スクロール非対応)
※IEは全てのバージョンでborder-imageが機能しません。

Step 2: ページ全体を角丸で囲む(スクロール対応)

Step 1ではスクロール非対応だったので、ページがビューポートより長くても問題ないようにします。

CSS

Step 1のCSSに、上3行を加えます。

* { box-sizing: border-box; }
html { height: 100%; }
body { min-height: 100%; }
body {
  border-image: url(rounded-edge.png) 25% repeat;
  border-width: 25px;
}
サイトのキャプチャ

デモページ(スクロール対応)
※ページを長くする時は「Add Text」ボタンをクリック。

Step 3: ページ全体を角丸で囲む(スクロールバーを変更)

美しい角丸ボーダーが設置でき、せっかくなのでスクロールバーもそれにあったものにしてみましょう。
Webkit系ブラウザのみの対応ですが、スクロールバーをカスタマイズできます。

サイトのキャプチャ

左:通常、右:カスタマイズ
※カスタマイズ版は、角丸ボーダーの内側にスクロールバーがあります。

HTML

ラッパーを一つ加えます。

<body>
  <div class="page-wrap">
    <h1>Rounded inside body border</h1>
  </div>
</body>

CSS

-webkit-scrollbar-thumbでスクロールバーを角丸にあうデザインにします。

body {
  background: #5bb0ff;
}

.page-wrap {
  position: fixed;
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;
  background: white;
  border-radius: 10px;
  padding: 20px;
  overflow-y: scroll;
}

::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}
サイトのキャプチャ

デモページ
※ページを長くする時は「Add Text」ボタンをクリック。

top of page

©2017 coliss