CSSで角の丸い枠を作成する方法です。
概要
CSSを利用して領域の角を丸くする場合は、border-radius プロパティを利用します。
書式
border-radius:(左上の水平半径) (右上の水平半径) (右下の水平半径) (左下の水平半径) / (左上の垂直半径) (右上の垂直半径) (右下の垂直半径) (左下の垂直半径);
/ を省略すると水平方向と垂直方向で同じ半径とみなされます。
border-radius:(左上の半径) (右上の半径) (右下の半径) (左下の半径);
記述例
例1
.ToolTipWindow {
color: #FFFFFF;
background-color: #3d3d3d;
padding: 0.2rem 0.2rem 0.2rem 0.2rem;
border-radius: 2px 2px 2px 2px / 2px 2px 2px 2px;
}
例2
<div style="height:75px; padding-top:25px; border:solid 4px #808080;
border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;">枠つきです。</div>
角の丸い枠です。
例3
<div style="height:75px; padding-top:25px; border:solid 4px #808080;
border-radius: 100px 100px 1005px 1005px / 25px 25px 25px 25px;">枠つきです。</div>
角の丸い枠です。
例4
<div style="height:75px; padding-top:25px; padding-left:16px; border:solid 4px #808080;
border-radius: 50px 20px 20px 20px;">枠つきです。</div>
角の丸い枠です。
個別に角の半径を指定する
以下のプロパティを使用すると個々に角の半径を指定できます。
- border-top-left-radius
- border-top-righr-radius
- border-bottom-left-radius
- border-bottom-right-radius
書式
border-top-left-radius (角の半径)
または
border-top-left-radius (角の水平半径) (角の垂直半径)
になります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2022-11-02
作成日: 2011-08-18
