WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「左下の角丸」

border-bottom-left-radius 「罫線の左下角丸」

border-bottom-left-radius プロパティは罫線の左下を丸く設定をまとめて行うことができます。四隅の角丸指定は「border-radius」を使用します。

CSS Ver.適用要素継承
3.0全てしない
広告

border-bottom-left-radius の値

【構文】

border-bottom-left-radius : [radius;
radius [角丸の指定] ( サンプル )
border-bottom-left-radius: ~px;(em,pt,%,・・・)角丸の長さを指定する
px,em,%などの指定が可能
0を指定すると丸みなし(角)となる
border-bottom-left-radius: (1);丸みの長さを1つのみ指定すると、
左下のの丸みの半径指定となる
border-bottom-left-radius: (1) (2);丸みの長さを2つ指定すると、
(1)水平方向、(2)垂直方向の丸み指定となる
ページTOP

border-bottom-left-radius のサンプル

1.罫線のスタイルの指定

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>罫線のスタイル指定サンプル</title>
  <style type="text/css">
  <!--
    div  {
           float: left;
           border: 4px solid #333;
           width : 80px;
           height: 50px;
           margin: 10px;
           text-align: center;
         }
    .s1  { border-bottom-left-radius: 30px; }       /* 左下 */
    .s2  { border-bottom-left-radius: 3em;  }       /* 左下 */
    .s3  { border-bottom-left-radius: 50%;  }       /* 左下 */
    .s4  { border-bottom-left-radius: 60px 60%; }  /* 左下 水平方向 垂直方向 */
  -->
  </style>
</head>
<body>
<p style="font-size:12pt; " >罫線の角丸指定サンプル</p>
<div class="s1">s1</div>
<div class="s2">s2</div>
<div class="s3">s3</div>
<div class="s4">s4</div>
</body>
</html>

角丸の指定意味

.s1 { border-bottom-left-radius: 30px; }
.s4 { border-bottom-left-radius: 60px 60%; }
ページTOP

関連するCSSプロパティ

border-radius角丸をまとめて指定
border-top-left-radius左上の角丸を指定
border-top-right-radius右上の角丸を指定
border-bottom-right-radius右下の角丸を指定
border罫線の設定
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン