CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのborder-top-left-radiusプロパティの使い方をわかりやすく解説

border-top-left-radiusプロパティとは

border-top-left-radiusは、CSSで要素の左上の角に丸み（角丸）をつけるためのプロパティです。値には「px」「em」などの長さの単位、またはパーセンテージを指定でき、数値が大きいほど角のカーブが大きくなります。

基本構文

border-top-left-radius: 45px;

使用例：左上の角だけを大きく丸める

次のサンプルコードでは、まずborder-radiusで四隅すべてに25pxの角丸を設定したうえで、border-top-left-radiusを使って左上の角のみ45pxに変更しています。

サンプルコード

<html>
  <head>
    <style>
      #rcorner {
        border-radius: 25px;
        border-top-left-radius: 45px;
        background: green;
        padding: 20px;
        width: 200px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <p id="rcorner">Rounded corners!</p>
  </body>
</html>

コードのポイント

  • border-radius: 25px; … 四隅すべてに25pxの角丸を適用します。
  • border-top-left-radius: 45px; … 左上の角だけを45pxに上書きします。
  • background: green; … 背景色を緑にして角丸が見えやすいようにしています。

指定できる主な値

  • 長さの単位（px、em、remなど）：角の半径を固定値で指定します。
  • パーセンテージ（%）：ボックスの寸法に対する割合で角丸を指定します。水平方向と垂直方向で別々の値を指定することも可能です（例：border-top-left-radius: 50% 30%;）。
  • 初期値は0：指定しない場合、角は丸められません。

同様のプロパティとして、右上のborder-top-right-radius、右下のborder-bottom-right-radius、左下のborder-bottom-left-radiusがあり、これらを組み合わせることで各角の丸みを個別に制御できます。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります