文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > BOXのデザイン > ブロックの角を丸くする

角丸「border-radius」のCSS生成

htmlの「div」などブロックの角を丸くするにはCSSの「border-radius」を使用します。
当ページでは、実際に見ながら角の丸みを付け、CSSを作成することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

角を丸くしてみよう

四隅を個別で丸め度合いを指定することもできます。色々な角丸をお試しください。

BOXの大きさ
横幅
高さ
角丸の指定
四隅
左上
右上
左下
右下
背景の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
枠線の色
枠線幅
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<div class="box"></div>
生成したCSS
.box {
  margin        : auto;                 /* サンプル用 中央寄せ */
  box-sizing    : border-box;           /* 罫線も含む長さ      */
  width         : 250px;                /* BOXの幅             */
  height        : 150px;                /* BOXの高さ           */
  background    : #B0C4DE;              /* BOXの背景色         */
  border        : 3px solid #35557f;    /* 枠線の指定          */
  border-radius : 36px 0;               /* 角丸の指定          */
}
「border-radius」の使い方は以下を参照ください。
border-radius 「罫線の角丸」の構文
ページTOP
広告
広告

色々な角丸

円形のdiv

角丸「border-radius」を50%にすると丸くなります。縦横の長さも統一すると、円形となります。

<div class="sample1">丸</div>
<style type="text/css">
.sample1 {
  margin        : auto;                 /* サンプル用 中央寄せ */
  box-sizing    : border-box;           /* 罫線も含む長さ      */
  width         : 100px;                /* BOXの幅             */
  height        : 100px;                /* BOXの高さ           */
  background    : #B0C4DE;              /* BOXの背景色         */
  border        : 3px solid #35557f;    /* 枠線の指定          */
  border-radius : 50%;                  /* 角丸の指定          */
  line-height   : 94px;                 /* 文字を縦位置を中央  */
}
</style>
ページTOP

角丸アニメーション

CSS3で追加された「animation」を使用すると、角丸に変化を付けることが出来ます。
以下のサンプルは、四隅を50%から0に変化しています。

アニメーションについては以下をご確認ください。
animation 「アニメーション」

アニメ
<div class="sample2">アニメ</div>
<style type="text/css">
.sample2 {
  margin        : auto;                 /* サンプル用 中央寄せ */
  box-sizing    : border-box;           /* 罫線も含む長さ      */
  width         : 100px;                /* BOXの幅             */
  height        : 100px;                /* BOXの高さ           */
  background    : #B0C4DE;              /* BOXの背景色         */
  border        : 3px solid #35557f;    /* 枠線の指定          */
  border-radius : 50%;                  /* 角丸の指定          */
  line-height   : 94px;                 /* 文字を縦位置を中央  */
  animation     : sample2Anime 4s linear infinite alternate;
}
@keyframes sample2Anime{
   0% { border-radius : 50%; }
 100% { border-radius : 0;   }
}
</style>
ページTOP

角丸divを傾ける

CSS3で追加された「transform」を使用すると、DIVに変形を付けることが出来ます。
以下のサンプルは、角丸したDIVを15度(反時計周り)に傾けています。

transformについては以下をご確認ください。
transform 「変形」

15度傾き
<div class="sample3">15度傾き</div>
<style type="text/css">
.sample3 {
  margin        : auto;                 /* サンプル用 中央寄せ */
  box-sizing    : border-box;           /* 罫線も含む長さ      */
  width         : 200px;                /* BOXの幅             */
  height        : 70px;                 /* BOXの高さ           */
  background    : #B0C4DE;              /* BOXの背景色         */
  border        : 3px solid #35557f;    /* 枠線の指定          */
  border-radius : 20px;                 /* 角丸の指定          */
  line-height   : 64px;                 /* 文字を縦位置を中央  */
  transform     : rotate(-15deg);       /* 15度反時計回りする  */
}
</style>
ページTOP
広告
生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン