How Can I Create Rounded Outlines for Divs?

Can You Outline a Div with Rounded Corners?

Similar to the border-radius property, it's possible to give div elements rounded outlines. While you might think the border-radius property could do the trick, there's an alternative that offers more control: box-shadow.

For instance, if you have an input field with rounded borders and want to adjust the focus outline color, box-shadow can be employed. It provides a smooth look while also allowing for the simulation of a rounded outline. Here's how you can achieve this 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;
}

The above is the detailed content of How Can I Create Rounded Outlines for Divs?. For more information, please follow other related articles on the PHP Chinese website!