Cómo ajustar el ancho del borde usando CSS

En HTML, los bordes están diseñados para crear diferencias entre dos secciones y diseñar un elemento. Para este propósito, el "bordeSe utiliza la propiedad de CSS. Esta propiedad le permite ajustar el ancho, el estilo y el color del borde. El ancho del borde depende de la apariencia del elemento en la que aplicamos esta propiedad.

En este manual, aprenderemos cómo ajustar el ancho del borde.

Empecemos!

¿Qué es la propiedad "fronteriza" en CSS??

En HTML, para diseñar un borde alrededor de un elemento, el "bordeSe utiliza la propiedad. Básicamente, es una propiedad abreviada de "ancho del borde","estilo de borde", y "color del borde". Se utiliza para establecer el ancho del borde, el estilo del borde y el color del borde.

La sintaxis de la propiedad fronteriza es:

Border: color de estilo ancho

Aquí está la descripción de los valores dados:

• • ancho: Se usa para ajustar el ancho del borde.
  • estilo: Se utiliza para el estilo de la frontera, como un sólido, cresta o doble.
  • color: Se usa para cambiar el color del borde.

El "bordeLa propiedad se implementará en el siguiente ejemplo.

Ejemplo: Crear borde usando CSS

En este ejemplo, crearemos un borde alrededor de una sección HTML y asignaremos la clase "borde". Dentro de la sección, agregaremos un párrafo usando el

etiqueta:

"El éxito no es final; el fracaso no es fatal:
Es el coraje de continuar lo que cuenta." - Winston S. Churchill

Después de eso, nos moveremos al CSS y ajustaremos la longitud del borde usando el "borde" propiedad.

Aquí, usaremos ".borde"Para acceder a la clase que hemos asignado a la sección. Hemos establecido el valor de ancho "5px", estilo "sólido", y color "RGB (142, 26, 153)". Por último, el color de fondo de la sección se especifica como "Reg (214, 159, 181)":

.borde
borde: 5px RGB sólido (142, 26, 153);
Color de fondo: RGB (214, 159, 181);

Cuando todo esté hecho, ejecute el archivo HTML para ver la siguiente salida:

Nota: También puede aumentar o disminuir el ancho de acuerdo con su preferencia.

Ejemplo 2: ajuste el ancho del borde alrededor de una imagen

En este ejemplo, ajustaremos el ancho del borde alrededor de una imagen. Para hacerlo, agregaremos una imagen usando la etiqueta en el archivo HTML:

Ahora, muévase al archivo CSS y establezca el ancho del borde, el estilo, el color como "10px","ranura","RGB (255, 0, 0)", Respectivamente:

img
borde: 10px Groove RGB (255, 0, 0);

Nos dará la siguiente salida:

Nota: En el "borde"Propiedad, siempre debe asignar un valor positivo al ancho.

Hemos ofrecido el método para ajustar el ancho del borde alrededor de cualquier elemento.

Conclusión

En CSS, para ajustar el borde alrededor de un elemento, el "bordeSe utiliza la propiedad. Puede aumentar y disminuir el ancho del borde de acuerdo con la apariencia requerida de los elementos. En este artículo, hemos explicado cómo ajustar el ancho del borde usando el "borde"Propiedad y proporcionar diferentes ejemplos de la misma.