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

CSSのborder-radiusプロパティで角丸（ラウンドコーナー）を追加する方法

CSS3では、border-radiusプロパティを使用することで、本文やテキストを含む要素に特別な色の角丸（ラウンドコーナー）を簡単に追加できます。このプロパティを活用すれば、四角いボックスの角を滑らかに丸めることができ、Webページ全体に柔らかく洗練された印象を与えられます。

基本のサンプルコード

以下は、border-radiusプロパティを使って角丸のボックスを作成するシンプルな例です。

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

コードの解説

  • border-radius: 25px; … 四つのコーナーすべてに25pxの丸みを適用します。
  • background: #8AC007; … ボックスの背景色を黄緑色に設定します。
  • padding: 20px; … 内側に20pxの余白を設け、テキストが境界線に密着しないようにします。
  • width / height … ボックスの幅と高さをそれぞれ指定します。

表示結果

このコードをブラウザで開くと、黄緑色の背景を持つ角丸のボックス内に「Rounded corners!」というテキストが表示されます。border-radiusの値を大きくするほど、より強く丸みのある形状になります。

応用テクニック

border-radiusは、各コーナーごとに異なる値を指定することも可能です。例えば border-radius: 15px 50px 30px 5px; のように記述すると、左上・右上・右下・左下の順に個別の丸みを設定できます。さらに、値を50%に指定すると正円や楕円形を作ることもできるため、プロフィール画像やボタン、カード型UIのデザインなど、さまざまな場面で広く活用されています。

  1. CSSでテキストを整形する方法｜主要プロパティとサンプルコードを徹底解説

    CSSを使うことで、テキストを見栄えよく整形し、読み手にとって魅力的なコンテンツを作成できます。この記事では、CSSでテキストのスタイルを設定する際に使用される主なプロパティについて、役割と使い方をわかりやすく解説します。 CSSの主なテキストフォーマット用プロパティ color（文字色） テキストの色を変更するためのプロパティです。カラーキーワード、16進数カラーコード、rgb()関数などで色を指定できます。 letter-spacing（文字間隔） 文字と文字の間隔を調整します。値を大きくすると字間が広がり、見出しなどにゆったりとした印象を与えられます。 line-height（行

  2. Windows 11のタスクバーに角丸を追加する方法 – RoundedTBの使い方

    Windows 11には、アイコンの配置変更や表示アイコンの追加・削除、バッジの表示、タスクバーの自動非表示など、標準でいくつかのカスタマイズ設定が用意されています。しかし、設定アプリにはタスクバーに角丸を追加するオプションは存在しません。そのようなカスタマイズを実現するには、サードパーティ製アプリが必要になります。ここでは、「RoundedTB」を使ってWindows 11のタスクバーに曲線的なデザインを加える方法を紹介します。RoundedTBのダウンロードとインストール方法RoundedTBは、Microsoft Storeから無料で入手できるアプリで、Windows 11のタスクバーに