CSSプロパティ

CSS - border-top-left-radius

概要

CSSプロパティ｢border-top-left-radius｣は、ボックスや画像などの左上のコーナーに対して、角丸を指定するこができます。もし、4つの角すべてを一括で指定する場合は、border-radius プロパティを使用します。この角の指定は他に、 border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius があります。

<div>
  角丸指定なし
</div>
<div class="border-top-left-radius">
  左上のコーナーに角丸をつけたボックスです
</div>
<style>
div {
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}
.border-top-left-radius {
  border-top-left-radius: 20px;
}
</style>

また、背景、画像、色は、境界部分でクリッピングされます。このクリッピングされる場所は、CSSプロパティ background-clip で指定することができます。

値の指定方法

基本的な指定方法です。また値を2つ指定すると、角丸の水平方向と垂直方向を別々に指定することができます。またこの指定は、border-radius プロパティの場合はスラッシュで区切るので、間違えないように気をつけましょう。

{ border-top-left-radius: 値}
{ border-top-left-radius: 値 値}

実数値 + 以下のような単位で指定します。０を指定すると角は四角になります。マイナス値は指定できませんので、注意しましょう。値の単位の詳細は以下の通りです。

単位説明
pxpxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。
em親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。
%親要素の幅を基準に割合を％値で指定した単位です。

値を2つ指定した場合

水平と垂直の長さを変更することでちょっと変わった変化もつけることができます。

<p>※水平方向の値を大きめに指定</p>
<div class="border-radius-horizontal">水平と垂直でそれぞれ値を指定。</div>
<p>※垂直方向の値を大きめに指定</p>
<div class="border-radius-vertical">水平と垂直でそれぞれ値を指定。</div>
<style>
div {
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}
.border-radius-horizontal {
  border-top-left-radius: 50% 10px
}
.border-radius-vertical {
  border-top-left-radius: 10px 50%
}
</style>

使用例

タブデザインの例です。<li>タグの左上と右上のみコーナーを丸くしたいので、このプロパティと border-top-right-radius を使って実現します。

<ul>
  <li class="border-top-left-radius">タブ１</li><li class="border-top-right-radius">タブ２</li>
</ul>
<style>
* {
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
  padding: 8px;
  border: 1px solid #000;
  width: 150px;
  text-align: center;
}
li:first-child {
  background-color: #ddd;
  border-right: none;
}
.border-top-left-radius {
  border-top-left-radius: 10px;
}
.border-top-right-radius {
  border-top-right-radius: 10px;
}
</style>

仕様書

関連CSSプロパティ