Este blog discutirá:

• ¿Qué es el radio de contorno?
• ¿Cómo aplicar el efecto de radio de contorno en el elemento HTML?

¿Qué es el radio de contorno?

Él ' contorno La propiedad ” se utiliza para dar forma al contorno del elemento, pero no se puede implementar directamente. Por lo tanto, el método alternativo para aplicar el efecto de radio en un contorno es usar un “ borde-radio ” Propiedad CSS. Especifica las esquinas redondeadas para los contornos.

¿Cómo aplicar el efecto de radio de contorno en el elemento HTML?

Para usar la propiedad del radio del contorno, siga las instrucciones dadas.

Paso 1: incrustar encabezados

Inicialmente, incruste los encabezados utilizando cualquier etiqueta de encabezado de '

' a '

”. Por ejemplo, hemos utilizado el “

' y '

” etiquetas para incrustar dos encabezados diferentes en un documento HTML.

Paso 2: agregue el primer contenedor div

Después de eso, agregue un contenedor usando el '

' etiqueta. Además, inserte el “ clase ” atributo y especifique el nombre de la clase según su elección.

---

---

Paso 3: crear un segundo contenedor div

Crea otro ' división ” contenedor siguiendo el mismo procedimiento:

< h1 estilo = 'color: rgb (48, 10, 218)' > Linuxhint LTD Reino Unido < / h1 >

< h2 >

Diferentes ejemplos de border-radius para crear las esquinas de un contorno circular.

< / h2 >

< división clase = 'caja1-div' >

Linuxhint proporciona el mejor y más exclusivo contenido para sus usuarios.

< / división >

< división clase = 'caja2-div' >

Funciona en múltiples categorías.

< / división >

La salida del código anterior se muestra a continuación:

Paso 4: establecer el contorno del primer contenedor

Acceda al primer contenedor utilizando el ' .box1-div ” clase donde el “ . ” es un selector para acceder a la clase:

.box1-div {

contorno : sólido ;

ancho : 300px ;

relleno : 15px ;

margen : 25px ;

}

Luego, aplique las propiedades CSS que se enumeran a continuación:

• Él ' contorno La propiedad ” se utiliza para agregar un contorno alrededor del elemento. Por ejemplo, su valor se establece como “ sólido ”.
• “ ancho ” especifica el tamaño del elemento horizontalmente.
• “ relleno ” se utiliza para asignar el espacio alrededor del contenido del elemento.
• “ margen ” especifique el espacio en el lado exterior del borde del elemento.

Paso 5: establecer el contorno del segundo contenedor

Ahora, acceda al segundo elemento con la ayuda de su respectiva clase “ .box2-div ”:

.box2-div {

contorno : sólido ;

borde-radio : 20 píxeles ;

ancho : 300px ;

relleno : 15px ;

margen : 25px ;

}

Aplicar la propiedad CSS “ borde-radio ” para definir el radio del elemento. Esta propiedad le permite agregar esquinas redondeadas alrededor del elemento:

Se puede notar que hemos agregado con éxito el efecto de radio de contorno en el elemento HTML.

Conclusión

Él ' contorno-radio ' ya no está disponible. Los usuarios pueden aplicar las propiedades del radio del contorno con la ayuda de las propiedades de 'contorno' y 'radio del borde' de CSS. Él ' contorno ” agrega un contorno alrededor del elemento, y el “ borde-radio ” se usa específicamente para diseñar el contorno. Esta publicación ha demostrado las instrucciones para agregar el efecto de radio de contorno alrededor del elemento en HTML.