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

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

CSSのborder-top-left-radiusプロパティをご紹介します。

border-top-left-radius

border-top-left-radiusは要素の左上角の曲線を示すプロパティです。

基本構文

border-top-left-radius: 水平の軌道長半径 垂直の軌道長半径;

値が1つのみの場合は水平と垂直の軌道長半径に同じ値を適用します。

サンプル

サンプル1

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

<div></div>

サンプル2

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

<div></div>