技術コンテンツ

CSS

No.96 border-radius / 境界線の角の曲線

【CSS】border-radius - 境界線の角の曲線

CSSのborder-radiusプロパティについて解説します。

検証環境

CSS

macOS

14.1

border-radius

border-radiusは“境界線は角の曲線”のプロパティです。

左上、右上、左下、右下の角の曲線を一括設定します。

各角の個別設定はborder-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radiusを使用します。

【CSS】border-top-left-radius - 境界線の左上角の曲線

【CSS】border-top-right-radius - 境界線の右上角の曲線

【CSS】border-bottom-left-radius - 境界線の左下角の曲線

【CSS】border-bottom-right-radius - 境界線の右下角の曲線

基本構文

４パターンの基本的な構文があり、それぞれ値の個数が異なります。。

全て（値：１個）

値が１個の場合、全ての角に適用します。

border-radius: 値;

左上/右下・左下/右上（値：２個）

値が２個の場合、値1を左上と右下、値2を左下と右上に適用します。

border-radius: 値1 値2;

左上・右上/左下・右下（値：３個）

値が３個の場合、値1を左上、値2を右上と左下、値3を右下に適用します。

border-radius: 値1 値2 値3;

左上・右上・右下・左下（値：４個）

値が４個の場合、値1を左上、値2を右上、値3を右下、値4を左下に適用します。

border-radius: 値1 値2 値3 値4;

サンプル

全て

sample.html

<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    ___ih_hl_start
    border-radius: 20px;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー

左上/右下・左下/右上

sample.html

<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    ___ih_hl_start
    border-radius: 20px 40px;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー

左上・右上/左下・右下

sample.html

<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    ___ih_hl_start
    border-radius: 20px 40px 60px;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー

左上・右上・右下・左下

sample.html

<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    ___ih_hl_start
    border-radius: 20px 40px 60px 80px;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー