おおたおおた
2017/05/01

CSSのborder-radiusで角丸を作りたい!

この記事は約2分で読めます。

CSSのborder-radiusで角丸を作りたい!

CSS初級カスタマイズ

ちょっとhtmlやcssを使ってみたいんだけど…というウェブページ制作初心者の方に向けて、解説したいと思います。

ウェブサイトで四角い枠ではなく、角に丸みがあるデザインがあると思います。

CSSを使えば簡単に使うことができます♪

CSSで1番簡単な角丸を作る方法

クラス名demoは好きなクラス名に書き換えて下さい。
試しに10pxの角丸を作っています。もっと丸みがある方がイイ!という時は値を大きくします。

Safari、Google Chrome では -webkit-border-radius、Firefox では -moz-border-radius と指定するようになってます。

クロスブラウザ対策として記述するようにしましょう。

上だけ、下だけ角丸をつけたい!

値が半角スペースを入れて4つに増えました。
1つ目の数値から順に、左上、右上、左下、右下の角の数値となります。

なので上だけ角丸をつけたい場合は、始めの2つの数値を入れ、後の数値は0とします。

逆に下だけ丸みをつけたい場合は3,4番目の数値を入れてあげましょう。

実際のコードでおさらい

↑実際のHTMLコードと、

↑CSSはこちら。

下の角丸スペースが作れます。

という訳でCSSで角丸を作る方法でした~(`・ω・´)
CSSのborder-radiusで角丸を作りたい!
おおた イラストレーター / フロントエンジニア

リトルトゥースです。

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。