テンプレート・素材カテゴリ


CSS3で角丸のボックスを作る「border-radius」

TOPページ > デザイン講座 > 角丸のボックスを作る「border-radius」

border-radiusプロパティでは、ボックスや画像に角丸や装飾をつけることができます。ちょっとしたことで、センスがよくなること間違いなしです。


CSS:border-radius: 角丸の半径(px もしくは %)

BORDER-RADIUS
.kadomaru-01 {  
  font-size: 50px;
  border-radius: 10px;
  background: #b3ccff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;  
}
<div class="kadomaru-01>BORDER-RADIUS</div>

BORDER-RADIUS

角丸の半径を50pxに変えてみました。

.kadomaru-02 {  
  font-size: 50px;
  border-radius: 50px;
  background: #e6b3ff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;  
}
<div class="kadomaru-02>BORDER-RADIUS</div>

BORDER-RADIUS

10px幅のボーダーラインをつけました。

.kadomaru-03 {  
  font-size: 50px;
  border: 10px solid #ffb3cc;
  border-radius: 10px;
  background: #ffccff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;  
}
<div class="kadomaru-03>BORDER-RADIUS</div>

BORDER-RADIUS

下側だけ角丸にしてみました。何かに使えそうですね。

.kadomaru-04 {  
  font-size: 50px;
  background: #acc768;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
 -webkit-border-top-left-radius: 0px;  
  -webkit-border-top-right-radius: 0px;  
  -webkit-border-bottom-right-radius: 30px;  
  -webkit-border-bottom-left-radius: 30px;  
  -moz-border-radius-topleft: 0px;  
  -moz-border-radius-topright: 0px;  
  -moz-border-radius-bottomright: 30px;  
  -moz-border-radius-bottomleft: 30px;  
}  
<div class="kadomaru-04>BORDER-RADIUS</div>

バラの写真

もちろん画像にも使えます。

.kadomaru-05 {  
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;  
}
<img class="kadomaru-05" src="images/rose.jpg" width="470" height="72" alt="バラの写真">

参照:CSS3 角丸を表現する border-radius | CSS Lecture


Recommended


スマートフォンなど多様なデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニック。

応用テクニックやその仕組み、さらに踏み込んだ各種の情報もTIPSとして網羅。

現場のワークフローに沿ったサイト制作までを詳しく解説。プロが教える「実習」+「講義」の全30レッスン。

これからのWeb制作に必要な知識を総合的に解説。HTML5 2014年勧告候補に対応!

はじめて学ぶ人は、サイトの作り方をゼロから習得。すでに覚えた人は、「正しい」方法を復習できる。



ページトップへ