CSS でアウトラインの半径を設定

この記事では、ユーザーは、border-radius プロパティと同じように、outline プロパティの角を丸く設定する方法を学習します。 ここでは、outline プロパティに角丸を適用するさまざまな方法について説明しました。

outline プロパティの代わりに box-shadow CSS プロパティを使用して、アウトラインの半径を設定する

outline プロパティではなく box-shadow CSS プロパティを使用できます。 outline プロパティと同様に機能します。

以下の例のテキストを含む <div> 要素を作成しました。 また、<div> 要素にいくつかの CSS を適用しました。

background プロパティは、<div> 要素の背景色を設定します。 height および width CSS プロパティは、要素の高さと幅をそれぞれ設定するために使用されます。

border-radius プロパティは <div> 要素の角を丸くし、box-shadow は <div> にシャドウ効果を適用し、アウトラインとして機能します。

このように、box-shadow および border-radius プロパティを使用して、HTML 要素の丸みを帯びたアウトラインを作成できます。

HTML コード:

<div>Welcome to DelftStack!</div>

CSS コード:

div{
    background: yellow;
    height: 200px;
    width: 200px;
    border-radius: 10px;
    margin: 25px;
    padding: 20px;
    box-shadow: 0px 0px 0px 1px red inset;
}

CSS の after セレクターを使用して、アウトラインの半径を設定する

ユーザーは、デフォルトの outline CSS プロパティではなく ::after セレクターと border-radius プロパティを使用してアウトラインを作成できます。 border-radius プロパティを使用して、<div> 要素の角を丸くすることができます。

以下の例では、<p> 要素を作成し、その中にテキストを追加しています。 <p> 要素に CSS スタイルを適用しました。

<p> 要素を魅力的にするために、background、width、padding、color を設定しました。 さらに、<p> タグに border-radius を設定して角を丸くし、position を relative に設定して、現在の位置に応じて他の要素を追加します。

その後、::after セレクターと <p> タグを使用して、<p> タグの後にコンテンツを追加できるようにしました。 ここで、<p> 要素の後に空のテキストを追加しました。

また、空のテキストに border-radius と border を設定しました。

<p> タグの位置に従って、空のテキストの border の位置を設定しました。 これが position: absolute を使用した理由です。 outline として境界線を設定するために、top、bottom、left、および right の CSS プロパティに 0 の値を使用しました。これが、border がアウトラインとして機能する方法です。

ここで、position: absolute プロパティを使用せずに top、bottom、left、および right の値を設定することはできません。

HTML コード:

<p>Hello Programmers!</p>

CSS コード:

p{
    background: green;
    padding: 15px;
    border-radius: 5px;
    width: 300px;
    color: white;
    position: relative;
}
 p:after{
    content: "";
    display: block;
    border-radius: 5px;
    border: 2px solid red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

outline: auto プロパティと border-radius プロパティを一緒に使用して、アウトラインの半径を設定する

outline プロパティの値として auto を使用すると、丸みを帯びた角を含むカスタム アウトライン スタイルを表示できます。

この例では、HTML で <span> 要素を作成し、CSS を使用してスタイルを適用しました。 outline: auto CSS プロパティを border-radius プロパティと共に使用しました。これにより、アウトラインの角を丸くすることができます。

HTML コード:

<span>Here is the Outline.</span>

CSS コード:

span{
    outline: auto blue;
    border-radius: 8px;
    background-color: red;
}

この記事の指定された方法から、アウトラインの角を丸くするために、既定の CSS outline プロパティではなく、さまざまな CSS プロパティを使用してカスタム アウトラインを作成する必要があります。 カスタム アウトラインに変更を加えることができます。