CSS

CSSで角丸と円を作る方法【border-radius】

  /

CSSを使って角丸と円を作る方法をご紹介します。
その昔border-radiusが無かった時代は角丸を作るために、上下左右に角丸の画像を作って表示してました。

Contents
  1. 角丸と円のCSS記述
  2. CSSを使って角丸と円を作るHTML記述
  3. CSSで作った角丸と円のデモページ

角丸と円のCSS記述

※角丸（.kadomaru1）と円（.maru1）のCSS記述です。border-radiusのサイズで角丸にするか円になるかを調節してます。サイズ・色等は必要に応じて書き換えてください。

<style>
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  font-size: 16px;
}
h1{
  font-size:18px;
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
}
.maru1{
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border: solid 1px #777777;
    border-radius: 40px;
    background-color: #777777;
    text-align: center;
    line-height: 80px;
    color: #ffffff;
}
.kadomaru1 {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border: solid 1px #333333;
    border-radius: 10px;
    background-color: #333333;
    text-align: center;
    line-height: 80px;
    color: #ffffff;
}
</style>

CSSを使って角丸と円を作るHTML記述

※角丸（class=”kadomaru1″）と円（class=”maru1″）のタグを用意します。必要に応じて変更して下さい。

<h1>CSSで角丸と円を作ってみました</h1>
      <br>
      <br>
      <div class="kadomaru1">角丸</div>
      <br>
      <br>
      <div class="maru1">円</div>

　
IE6を知ってる僕はborder-radiusってかなり便利だなって今だに思ってしまいます。わかる人にはわかると思います。

CSSで作った角丸と円のデモページ

CSSで作った角丸と円のデモ

　
※流用される場合は自己責任でお願いします。
　タグ内のGoogleアナリティクスタグは流用しないで下さい。

角丸 border-radius
RELATED POST