How Can I Create a Rounded Outline Effect on a Div Element?

Simulating a Rounded Outline on a Div Element

While the border-radius property allows for rounded corners on the border of a div element, it doesn't provide a solution for a rounded outline.

However, a clever workaround exists using the box-shadow property. The following example demonstrates how to create a smooth, rounded outline effect:

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent; /* for high contrast modes */
    transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

/* Hard "outline" with box-shadow: */
.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

In this example, the box-shadow property creates a subtle shadow around the input field. By setting the spread radius to zero, the shadow is constrained to the edge of the element, creating an outline-like effect.

The text1 and text2 classes further customize the outline by changing the spread radius and color, resulting in either a smooth or hard-edged outline.

This technique provides a flexible and elegant solution for achieving rounded outlines on div elements.

The above is the detailed content of How Can I Create a Rounded Outline Effect on a Div Element?. For more information, please follow other related articles on the PHP Chinese website!