css

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

 

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

角丸と円のCSS記述

※サイズ・色等は必要に応じて書き換えてください。

<style type="text/css">
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>

角丸と円のHTML記述例

      <div class="kadomaru1">角丸</div>
      <br>
      <br>
      <div class="maru1">円</div>

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

　

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

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

角丸
RELATED POST