How to Set Radius for Outline in CSS

1. Use the box-shadow CSS Property Instead of the outline Property to Set the Radius for the Outline
2. Use the after Selector of CSS to Set the Radius for the Outline
3. Use the outline: auto and border-radius Properties Together to Set the Radius for the Outline

In this article, users will learn how to set rounded corners for the outline property, the same as the border-radius property. Here, we have explained the different methods to apply rounded corners to the outline property.

Use the box-shadow CSS Property Instead of the outline Property to Set the Radius for the Outline

We can use the box-shadow CSS property rather than the outline property. It works similarly to the outline property.

We have created the <div> element, which contains some text in the example below. Also, we have applied some CSS to the <div> element.

The background property will set the background color for the <div> element. The height and width CSS properties are used to set the height and width of the element, respectively.

The border-radius property will make rounded corners for the <div> element, and box-shadow will apply the shadow effect to the <div>, which will work as an outline.

In such a way, using the box-shadow and border-radius properties, we can create a rounded outline for any HTML element.

HTML Code:

<div>Welcome to DelftStack!</div>

CSS Code:

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

Use the after Selector of CSS to Set the Radius for the Outline

Users can create the outline using the ::after selector and the border-radius property rather than the default outline CSS property. We can make the <div> element’s corners rounded using the border-radius property.

In the example below, we have created the <p> element and added some text inside that. We have applied CSS styles to the <p> element.

We have set the background, width, padding, color for the <p> element to make it attractive. Furthermore, we have set the border-radius for the <p> tag to make its corner rounded and set position to relative to add other elements according to its current position.

After that, we used the ::after selector with the <p> tag, which allows us to add some content after the <p> tag. We have added the empty texts after the <p> element here.

Also, we have set the border-radius and border for the empty texts.

We have set the position of the border of the empty text according to the <p> tag’s position; that’s why we used position: absolute. To set the border as outline, we used 0 value for the top, bottom, left, and right CSS properties, which is how border will work as an outline.

Here, we can’t set the value of top, bottom, left, and right without using the position: absolute property.

HTML Code:

<p>Hello Programmers!</p>

CSS Code:

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;
}

Use the outline: auto and border-radius Properties Together to Set the Radius for the Outline

Using the auto as a value of the outline property allows us to show custom outline style, including rounded corners.

In this example, we have created the <span> element in HTML and applied styles using CSS. We have used the outline: auto CSS property with the border-radius property, which allows us to make rounded corners for the outline.

HTML Code:

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

CSS Code:

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

From the given methods in this article, we should use different CSS properties and make a custom outline rather than the default CSS outline properties to make rounded corners for the outline. We can make any changes to the custom outline.