角の丸い枠を描画するコードと表示結果

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の作業もする。 最近は生成AIの画像生成の沼に沈んでいる。