CIRSE CSS CON BORDE

Las formas se usan con frecuencia en el diseño web. Más específicamente, la forma del círculo se usa para atraer la atención del usuario y hacer que algo se destaque, como las imágenes de perfil se incrustan en su mayoría en un marco de círculo. CSS ofrece varias propiedades de estilo para los elementos para que se vean mejor para la aplicación como el "radio fronterizo"La propiedad se utiliza para hacer que los bordes del elemento reduzcan y el"borde"La propiedad establece el borde del elemento.

Este artículo te instruirá:

• Cómo crear un círculo con borde en CSS?
• Cómo agregar color en el círculo bordeado usando CSS?
• Cómo ajustar el estilo de borde de un círculo con CSS?

Cómo crear un círculo con borde en CSS?

Para crear un círculo con un borde en CSS, primero, la propiedad fronteriza se usa para aplicar el borde alrededor del elemento. El "radio fronterizoLa propiedad se usa para hacer la forma circular del borde.

Para este propósito, revise el ejemplo proporcionado.

Crear un archivo html

Primero, agregue un ""Elemento y asignarlo una clase"círculo-divino":

Clase de estilo "Circle-Div"

Acceder al ""Container con la ayuda de la clase especificada".círculo-divino”Y aplique las siguientes propiedades:

.círculo-div
Ancho: 200px;
Altura: 200px;
Radio fronterizo: 50%;
borde: 5px sólido RGB (119, 0, 255);

Aquí:

• "ancho"Especifica el ancho del círculo.
• "altura"Determina la altura del círculo.
• "radio fronterizo"Con el valor"50%"Significa el borde del círculo.
• "borde"Se utiliza para aplicar un borde con el ancho del borde especificado, el estilo y el color.

Producción

Cómo agregar color en el círculo bordeado usando CSS?

El CSS "color de fondoLa propiedad se utiliza para agregar color al círculo de la siguiente manera:

Color de fondo: LightSeagreen;

Producción

Cómo ajustar el estilo de borde de un círculo con CSS?

Al especificar el estilo de borde, podemos diseñar el borde del círculo. Algunos estilos fronterizos de uso frecuente se enumeran a continuación:

• Punteado
• Sólido
• Ranura
• Recuadro
• Comienzo
• Doble

Borde

Establezca el estilo de borde en "punteado"Para especificar el borde punteado:

borde: 5px punteado RGB (252, 87, 170);

Producción

Borde de la ranura

Aplicar el estilo de borde "ranura"En la propiedad fronteriza:

borde: 10px Groove RGB (187, 181, 226);

Producción

Hemos demostrado con éxito cómo crear y diseñar el círculo bordeado en CSS.

Conclusión

Para crear un círculo con bordes, se utilizan dos propiedades principales de CSS. Para crear un borde, primero, agregue un contenedor "div" y acceda a él en CSS utilizando su clase respectiva. Luego, aplique el CSS "radio fronterizo"Propiedad y ajustarla a"50%"Para crear un círculo y el CSS"bordeLa propiedad se utiliza para establecer un borde alrededor del círculo. Este blog ha explicado el método para crear un círculo con fronteras en CSS.