CSS では、アウトラインは要素の外側に線を引くために使用されます。アウトラインは境界線に似ていますが、レイアウト内のスペースを占有せず、通常は視覚的な強調や要素の強調表示に使用されます。

CSS でアウトラインを使用する方法は次のとおりです。

基本概要:

outlineプロパティを使用して基本的なアウトラインを設定できます。次の 3 つの値を取ります。

 css
 .element {
  outline: [outline-color] [outline-style] [outline-width];
}

アウトラインの色: アウトラインの色。カラー名、16進数コード、RGB値などで指定できます。
アウトラインスタイル: アウトラインのスタイル。 dotted 、 dashed 、 solid 、 double 、 groove 、 ridge 、 inset 、 outset 、またはnoneかになります。
アウトライン幅: アウトラインの幅。ピクセル、ems、rems などで指定できます。

例：

 css
 .element {
  outline: 2px solid red;
}

略記の概要:

短縮表現プロパティoutlineを使用すると、3 つの値すべてを一度に設定できます。

 css
 .element {
  outline: [outline-width] [outline-style] [outline-color];
}

例：

 css
 .element {
  outline: 2px solid red;
}

アウトラインのオフセット:

outline-offsetプロパティを使用して、要素の輪郭と境界線の間のスペースを設定できます。

 css
 .element {
  outline-offset: 5px;
}

アウトラインの削除:

要素からアウトラインを削除するには、 outlineプロパティをnoneに設定します。

 css
 .element {
  outline: none;
}

特にリンクやボタンなどのインタラクティブな要素からアウトラインを削除すると、アクセシビリティに影響を与える可能性があることに注意してください。焦点を絞るための代替スタイルや視覚的なインジケーターを提供することが重要です。

例：

 html
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .outlined {
      width: 100px;
      height: 50px;
      background-color: lightblue;
      margin: 20px;
      outline: 2px dashed red;
    }

    .no-outline {
      width: 100px;
      height: 50px;
      background-color: lightgreen;
      margin: 20px;
      outline: none;
    }
  </style>
  <title>Outline Example</title>
</head>
<body>
  <div class="outlined">Outlined Element</div>
  <div class="no-outline">Element with No Outline</div>
</body>
</html>

この例では、最初のdivは輪郭があり、2 番目には輪郭がありません。必要に応じて値を調整します。