Web blog WEBブログ

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

2019.05.20

※この記事は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サイトに合わせて色々実装してみましょう!

ご相談・カスタマイズご依頼

弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。

兼山暖美

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

この記事を読んだ方はこんな記事も読んでいます

こんにちは。コーダーの兼山です。 コーディングでのテキストの装飾は、基本的なフォント指定以外では画像で処理するのが一般的…

こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…

こんにちは。コーダーの兼山です。 フォーム要素のテキストエリアの領域の拡大、縮小などのリサイズをCSSで制御する方法を紹…

こんにちは。コーダーの兼山です。 テーブルをモバイル画面などの小さな範囲で表を見せる際に役立つ、行や列を固定してスクロー…

こんにちは。コーダーの兼山です。 スライダープラグインの設置をする機会は多く、加えてドットのデザインを変更することもある…

無料相談窓口