cman.jp角丸「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 「罫線の角丸」の構文
border-radius 「罫線の角丸」の構文
広告
広告
色々な角丸
円形の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>
角丸アニメーション
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>
角丸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>
広告
| 生成できるホームページ・パーツ一覧 | |
 文字のデザイン | |
 画像のデザイン | |
 ボタンのデザイン | |
 入力項目のデザイン | |
 テーブルのデザイン | |
 BOXのデザイン | |
 吹き出しのデザイン | |
 ページのデザイン | |
 図形のデザイン | |
| ご利用時の注意事項・制約事項 | |
| よくあるご質問 | |
| 何で無料なの？ | |
| 生成コードに利用制限はある？ | |
| 生成コードに保証はある？ | |
| jQueryで生成できない？ | |
広告
広告
スマートフォン・タブレット | 運営:株式会社シーマン |