CSS Establecer radio para contorno

1. Use la propiedad CSS box-shadow en lugar de la propiedad outline para establecer el radio para el contorno
2. Use el selector después de CSS para establecer el radio para el contorno
3. Use las propiedades outline: auto y border-radius juntas para establecer el radio para el contorno

En este artículo, los usuarios aprenderán cómo establecer esquinas redondeadas para la propiedad contorno, al igual que la propiedad border-radius. Aquí, hemos explicado los diferentes métodos para aplicar esquinas redondeadas a la propiedad contorno.

Use la propiedad CSS box-shadow en lugar de la propiedad outline para establecer el radio para el contorno

Podemos usar la propiedad CSS box-shadow en lugar de la propiedad outline. Funciona de manera similar a la propiedad esquema.

Hemos creado el elemento <div>, que contiene algo de texto en el ejemplo a continuación. Además, hemos aplicado algo de CSS al elemento <div>.

La propiedad background establecerá el color de fondo para el elemento <div>. Las propiedades CSS height y width se utilizan para establecer la altura y el ancho del elemento, respectivamente.

La propiedad border-radius hará esquinas redondeadas para el elemento <div>, y box-shadow aplicará el efecto de sombra al <div>, que funcionará como un contorno.

De esta forma, usando las propiedades box-shadow y border-radius, podemos crear un contorno redondeado para cualquier elemento HTML.

Código HTML:

<div>Welcome to DelftStack!</div>

Código CSS:

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

Use el selector después de CSS para establecer el radio para el contorno

Los usuarios pueden crear el contorno utilizando el selector ::después y la propiedad border-radius en lugar de la propiedad CSS predeterminada contorno. Podemos redondear las esquinas del elemento <div> usando la propiedad border-radius.

En el siguiente ejemplo, hemos creado el elemento <p> y hemos agregado algo de texto dentro de él. Hemos aplicado estilos CSS al elemento <p>.

Hemos establecido el fondo, ancho, relleno, color para el elemento <p> para hacerlo atractivo. Además, hemos configurado el border-radius para la etiqueta <p> para que su esquina se redondee y hemos configurado la posición en relativa para agregar otros elementos de acuerdo con su posición actual.

Después de eso, usamos el selector ::after con la etiqueta <p>, que nos permite agregar algo de contenido después de la etiqueta <p>. Hemos agregado los textos vacíos después del elemento <p> aquí.

Además, hemos establecido el border-radius y el border para los textos vacíos.

Hemos establecido la posición del borde del texto vacío según la posición de la etiqueta <p>; por eso usamos posición: absoluta. Para establecer el borde como contorno, utilizamos el valor 0 para las propiedades CSS superior, inferior, izquierda y derecha, que es cómo funcionará borde como contorno.

Aquí, no podemos establecer el valor de arriba, abajo, izquierda y derecha sin usar la propiedad posición: absoluta.

Código HTML:

<p>Hello Programmers!</p>

Código 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;
}

Use las propiedades outline: auto y border-radius juntas para establecer el radio para el contorno

El uso de auto como valor de la propiedad contorno nos permite mostrar un estilo de contorno personalizado, incluidas las esquinas redondeadas.

En este ejemplo, hemos creado el elemento <span> en HTML y aplicado estilos usando CSS. Hemos utilizado la propiedad CSS outline: auto con la propiedad border-radius, que nos permite hacer esquinas redondeadas para el contorno.

Código HTML:

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

Código CSS:

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

De los métodos proporcionados en este artículo, debemos usar diferentes propiedades CSS y crear un contorno personalizado en lugar de las propiedades predeterminadas de contorno CSS para hacer esquinas redondeadas para el contorno. Podemos realizar cualquier cambio en el esquema personalizado.