この記事は2011年9月7日に書かれたものです。既に内容が古い可能性があります。

CSS3 角丸 border-radius

楕円の水平方向・垂直方向の半径の組み合わせ。

[ px ] [ em ] [ pt ] [ % ]

#sample {
  background-color or border

  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
}
#sample {
  background-color or border
  
  /* 左上・右上・右下・左下 */
  border-radius: 50px 50px 50px 50px / 80px 80px 80px 80px;
  -moz-border-radius: 50px 50px 50px 50px / 80px 80px 80px 80px;
  -webkit-border-radius: 50px 50px 50px 50px / 80px 80px 80px 80px;
  -o-border-radius: 50px 50px 50px 50px / 80px 80px 80px 80px;
  -ms-border-radius: 50px 50px 50px 50px / 80px 80px 80px 80px;
}
#sample {
  個別指定
  background-color or border
  
  border-top-left-radius: 10px; /* 左上 */
  border-top-right-radius: 10px; /* 右上 */
  border-bottom-left-radius: 10px;  /* 左下 */
  border-bottom-right-radius: 10px;  /* 右下 */

}

2011年9月7日 | カテゴリー

タグ: