【CSS】border-radius

border-radiusは、CSSのプロパティで、要素の角を丸めます。1つの半径を設定すると円の角、2つの半径を設定すると楕円の角になります。

■構文

/* 全ての角 */
border-radius: 20px;

/* 左上と右下 | 右上と左下 */
border-radius: 20px 10px;

/* 左上 | 右上と左下 | 右下 */
border-radius: 20px 10px 5px;

/* 左上 | 右上 | 右下 | 左下 */
border-radius: 20px 10px 5px 10px;

------------------------------------------------------
★下記は「水平方向 / 垂直方法」となっている。

/* (最初の半径の値) / 全ての角 */
border-radius: 20px / 5px;

/* (最初の半径の値) / 左上と右下 | 右上と左下 */
border-radius: 20px 10px / 5px 15px;

/* (最初の半径の値) / 左上 | 右上と左下 | 右下 */
border-radius: 20px 10px 5em / 5px 15px 40%;

/* (最初の半径の値) / 左上 | 右上 | 右下 | 左下 */
border-radius: 20px 40% / 5px 15px 40em 30em;

■補足

border-radius: 5px ○px ○px ○px / 10px ○px ○px ○px;

今回はメモ程度としておきます。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中