株式会社スゴヨク グーグルパートナーバッジ

福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 【CSS】border-radiusを自由自在に扱う

SUGOYOKU BLOG

【CSS】border-radiusを自由自在に扱う

福岡に拠点を置いているホームページ制作・SEO対策の株式会社スゴヨクです。

今回は、border-radiusを使う方法についてご紹介していきたいと思います。

border-radiusについて

まず初めに、border-radiusについて説明していきます。

border-radiusは図形の角を丸くすることができます。
以下に図で表しています。




上記のように、四角の角を取り除くのが、border-radiusの使い方です。



CSS

border-radiusで作られる様々な円形をご紹介

border-radiusで上記のような正円形の作り方は理解できましたか。
ここからは、正円形以外の円形の作り方をご紹介していきます。




楕円形

楕円形の作り方を説明していきます。






長円形

長円形の作り方を説明していきます。ボタンでよく使われる形です。




今回はborder-radiusについて説明いたしましたがいかがでしたでしょうか。

border-radiusを使いこなして、様々なデザインのwebサイトを作ってみてください。

HP無料診断

毎月3社様限定SEO対策無料診断

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金・補助金・融資・M&A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。


補助金 お問い合わせ

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得