一つの角だけを丸める[border-radius の使い方]

便利で使う場面の多い border-radius 、円形に切り抜くのに使う プロパティです。
今回は少し踏み込んだ使い方を説明します。

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

値の数値がpxと%で形が変わる

width と height の値が一緒だとほとんど違いはわからないですが、長方形になると値による形状の違いがよくわかります。
px指定は上面が平らなのに対し、%指定だとなだらかな卵型になっています。
これは一つの角だけ丸めたいという時にかなり雰囲気が変わってきます。

50px指定

50%指定

特定の角の丸め方

特定の角を丸めたい時は border と radius の間に位置を指定します。

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

50px指定

50%指定

このように上か下(top か bottom)の後に左か右(left か right)を指定して、どの角を丸めるか決めます。

border-radius: 10px 20px 30px 40px; といった指定も可能です。
左上右上右下左下 の順番に指定できます。

上手に使えばデザインのアクセントに使える

border-radius の値の入力方法次第で、いろいろな形に変化させることが出来るので、メニューの背景や見出しにも使えます。

border-radius: 50px 20px;
2つの値をいれることで対角の角を指定

border-radius: 40px / 100px;
/ で2つの数値を区切る事で、横半径 / 縦半径 の角丸を指定できます。

css.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。