Web blog WEBブログ

CSSのborder-radiusで角丸を指定する方法

2019.05.20

こんにちは。コーダーの兼山です。

今回は、CSSの『border-radius』で色々な角丸を指定する方法を紹介します。
border-radiusは、ボックスや画像などの要素に対して適応できます。
(インライン要素には指定できません。)

全体の角を角丸にする

border-radius』は、
値として指定された数値の半径の円弧をベースにした角丸を実装します。

正円にする

正円にしたいときは、値を『50%』とします。

左上だけを角丸にする

左上への指定は、
border-top-left-radius:値;
-webkit-border-top-left-radius:値;
-moz-border-radius-topleft:値;
となります。

右上だけを角丸にする

右上への指定は、
border-top-right-radius:値;
-webkit-border-top-right-radius:値;
-moz-border-radius-topright:値;
となります。

左下だけを角丸にする

左下への指定は、
border-bottom-left-radius:値;
-webkit-border-bottom-left-radius:値;
-moz-border-radius-bottomleft:値;
となります。

右下だけを角丸にする

右下への指定は、
border-bottom-right-radius:値;
-webkit-border-bottom-right-radius:値;
-moz-border-radius-bottomright:値;
となります。

上を角丸にする

・左上だけを角丸にする
・右上だけを角丸にする
これらの記述で再現できます。

下を角丸にする

・左下だけを角丸にする
・右下だけを角丸にする
これらの記述で再現できます。

右上・左下を角丸にする

・左下だけを角丸にする
・右上だけを角丸にする
これらの記述で再現できます。

左上・右下を角丸にする

・左上だけを角丸にする
・右下だけを角丸にする
これらの記述で再現できます。

歪んだ円を作成する

値をパーセンテージで指定することで実装できます。

※ 解説については、最終の「border-radiusについて」をご覧ください。

歪んだ四角を作成する

値をピクセルで指定することで実装できます。

仕組みは、
・歪んだ円を作成する
こちらの内容の応用となります。

border-radiusについて

border-radiusプロパティは、要素の境界の外側の角を丸めます。
1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。
楕円は、border-radius: 10px 20px; の様な記述で再現できます。

水平方向と垂直方向の半径の指定は、スラッシュ( / )で区切ります。
スラッシュの前後に水平方向と垂直方向の半径の値を、左上・右上・右下・左下の順(左上を基準に時計回り)で指定します。

尚、ここまでの記述では、
ベンダープレフィックスの記述も加えてあります。
-webkit-border-radius → Safari、Chrome
-moz-border-radius → Firefox
必要に応じて記述をすれば良いので、基本的には、border-radius のみでOKです。

まとめ

これらの方法を利用すると、様々な雰囲気の角丸を表現できます。
Webサイトに合わせて色々実装してみましょう!

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口