14-bordes en css

---

Bordes en CSS

• CSS Border
• CSS Border Width
• CSS Border Color
• CSS Border - Individual Sides
• CSS Border - Shorthand Property
• CSS Rounded Borders

---

CSS Border

El borde (border) en CSS es una propiedad fundamental utilizada para definir el contorno de un elemento. El borde es una línea que se dibuja alrededor de un cuadro de un elemento HTML, que sirve como contorno visual o separación. Esta propiedad puede utilizarse para agregar estilo a los elementos, ayudando a resaltar o diferenciar secciones de contenido.

Los bordes en CSS no solo sirven para fines estéticos, sino que también pueden ayudar a mejorar la accesibilidad y la legibilidad de la página. Por ejemplo, se puede usar para separar distintos bloques de contenido y hacer que la página sea más fácil de leer.

La propiedad border es una abreviatura que combina tres propiedades individuales: border-width (grosor del borde), border-style (estilo del borde), y border-color (color del borde). Además, se puede utilizar para definir bordes para cada lado del elemento de forma individual (superior, derecho, inferior, izquierdo).

Los bordes en CSS pueden tener diferentes estilos, como:

• dotted: Define una frontera punteada.
• dashed: Define una frontera rota.
• solid: Define una frontera sólida.
• double: Define una doble frontera.
• groove: Define una frontera en 3D. El efecto depende del color del borde.
• ridge: Define una frontera en 3D. El efecto depende del color del borde.
• inset: Define una frontera en 3D. El efecto depende del color del borde.
• outset: Define una frontera de inicio en 3D. El efecto depende del color del borde.
• none: No define un borde.
• hidden: Define una frontera oculta.

El uso de bordes es ideal cuando se quiere:

• Resaltar un área específica de un diseño.
• Crear distinciones entre secciones de contenido.
• Mejorar la estética de la página web o aplicación.
• Definir espacios entre los elementos de una interfaz.

Es importante saber cuándo usar los bordes, ya que en exceso pueden hacer que el diseño sea más pesado o confuso visualmente. Los bordes se deben usar con moderación y en contextos donde se necesite una clara separación de elementos o se quiera enfocar la atención en un área particular del contenido.

Ejemplos Visuales

Borde Punteado

Este cuadro tiene un borde verde con estilo punteado.

Borde Roto

Este cuadro tiene un borde rojo con estilo roto.

Borde Sólido

Este cuadro tiene un borde negro con estilo sólido.

Borde Doble

Este cuadro tiene un borde de color tomate con estilo doble.

Borde en 3D (Groove)

Este cuadro tiene un borde azul con estilo en 3D tipo "groove".

Borde en 3D (Ridge)

Este cuadro tiene un borde morado con estilo en 3D tipo "ridge".

Borde en 3D (Inset)

Este cuadro tiene un borde verde con estilo en 3D tipo "inset".

Borde en 3D (Outset)

Este cuadro tiene un borde rosa con estilo en 3D tipo "outset".

No Borde

Este cuadro no tiene borde (estilo "none").

Borde Oculto

Este cuadro tiene el borde oculto (estilo "hidden").

Borde Mezclado

Este cuadro tiene una mezcla de estilos de borde: punteado, roto, sólido y doble.

---

...

CSS Border Width

La propiedad border-width en CSS se utiliza para especificar la anchura de los bordes de un elemento. Esta propiedad define el grosor del borde que rodea el contenido de un elemento, y puede ajustarse de diferentes maneras según las necesidades del diseño.

El valor de border-width puede definirse en unidades específicas, como px, em, pt, cm, etc. También puede utilizar uno de los tres valores predefinidos:

• thin - Define un borde delgado.
• medium - Define un borde de grosor medio.
• thick - Define un borde grueso.

Si no se especifica un valor, el borde tendrá el valor predeterminado de medium.

La propiedad border-width también puede aplicarse a los cuatro bordes de un elemento (superior, derecho, inferior, izquierdo). Si se usan varios valores, estos se asignan en el siguiente orden:

• El primer valor aplica al borde superior.
• El segundo valor aplica al borde derecho e izquierdo.
• El tercer valor aplica al borde inferior.

Ejemplo de cómo se usa border-width con valores específicos y predefinidos:

Ejemplo de código:

/* Borde superior de 5px, borde derecho de 10px, borde inferior de 5px, borde izquierdo de 10px */
div {
    border-width: 5px 10px 5px 10px;
    border-style: solid;
    border-color: #39a039;
}

En este ejemplo, el borde superior y el inferior tienen un grosor de 5px, mientras que el borde derecho e izquierdo tienen un grosor de 10px, con un estilo sólido y color verde.

También se puede usar un valor único, como 5px, para aplicar el mismo grosor a todos los bordes, o un valor como thin para aplicar un borde delgado en todos los lados.

Ejemplos Visuales de Border Width

Borde de 5px

Este cuadro tiene un borde sólido de 5px de grosor y color verde.

Borde de 10px

Este cuadro tiene un borde sólido de 10px de grosor y color rojo.

Borde Thin

Este cuadro tiene un borde delgado ("thin") de color azul.

Borde Medium

Este cuadro tiene un borde de grosor medio ("medium") de color tomate.

Borde Thick

Este cuadro tiene un borde grueso ("thick") de color morado.

Borde de 5px en todos los lados

Este cuadro tiene un borde de 5px de grosor en todos los lados y color rosa.

Bordes de Diferentes Tamaños

Este cuadro tiene el borde superior e inferior de 5px, y el borde derecho e izquierdo de 10px, con color verde.

---

CSS Border Color

La propiedad border-color en CSS se utiliza para especificar el color de los bordes de un elemento. Esta propiedad puede establecerse para los cuatro bordes del elemento, y su valor puede ser uno de varios formatos de color válidos en CSS.

Los colores pueden definirse de diversas maneras, tales como:

• Nombre de color: Se puede especificar un nombre de color, como rojo, azul, etc.
• HEX: Utilizando un valor hexadecimal, como #ff0000 para el color rojo.
• RGB: Usando el formato RGB, como rgb(255, 0, 0) para el rojo.
• HSL: Utilizando el formato HSL, como hsl(0, 100%, 50%) para un rojo puro.
• Transparente: Es posible usar transparent para crear bordes invisibles.

Si no se establece un color de borde explícitamente, el borde hereda el color del elemento contenedor o el color de su texto.

Ejemplo de código:

/* Bordes con color verde */
div {
    border-width: 5px;
    border-style: solid;
    border-color: #39a039;
}

En este ejemplo, se define un borde de 5px de grosor con un estilo sólido y color verde, utilizando el valor hexadecimal #39a039.

Ejemplos Visuales de Border Color

Borde con color "Red" (Clase .one)

Este cuadro tiene un borde de 5px de grosor con color rojo utilizando la clase .one que tiene un borde sólido con color rojo.

Borde con color "Green" (Clase .two)

Este cuadro tiene un borde de 5px de grosor con color verde utilizando la clase .two que tiene un borde sólido con color verde.

Borde con color "Blue" (Clase .three)

Este cuadro tiene un borde de 5px de grosor con color azul utilizando la clase .three que tiene un borde punteado con color azul.

---

CSS Border - Individual Sides

La propiedad border se puede especificar para lados individuales, utilizando propiedades como:

• border-top
• border-right
• border-bottom
• border-left

Cada una de estas propiedades permite personalizar los bordes de un lado específico del elemento.

Ejemplo de código:

/* Borde superior de 5px y color verde */
div {
    border-top: 5px solid #39a039;
}

En este ejemplo, solo se aplica un borde en la parte superior del elemento con un grosor de 5px y color verde.

Ejemplos Visuales de Border - Individual Sides

Borde Superior (border-top)

Este cuadro tiene un borde superior de 5px con color verde utilizando border-top.

Borde Derecho (border-right)

Este cuadro tiene un borde derecho de 5px con color azul utilizando border-right.

Borde Inferior (border-bottom)

Este cuadro tiene un borde inferior de 5px con color rojo utilizando border-bottom.

Borde Izquierdo (border-left)

Este cuadro tiene un borde izquierdo de 5px con color naranja utilizando border-left.

---

CSS Border - Shorthand Property

La propiedad abreviada border permite establecer el grosor, el estilo y el color de los bordes en una sola declaración.

Se puede especificar en el siguiente formato: border: <grosor> <estilo> <color>;

Ejemplo de código:

/* Borde de 5px, estilo sólido y color verde */
div {
    border: 5px solid #39a039;
}

Este ejemplo utiliza la propiedad abreviada para aplicar un borde de 5px de grosor, de estilo sólido y color verde.

Ejemplo visual de Border - Shorthand Property

Uso de Border Shorthand

Este cuadro tiene un borde de 5px de grosor, estilo sólido y color verde utilizando la propiedad abreviada border: 5px solid #39a039.

---

CSS Rounded Borders

La propiedad border-radius en CSS se utiliza para redondear las esquinas de los bordes de un elemento. Se puede aplicar de diferentes formas según el grado de redondeo deseado.

Ejemplos de bordes redondeados:

Normal border

div {
    border: 5px solid #39a039;
    border-radius: 5px; /* Bordes ligeramente redondeados */
}

Round border

div {
    border: 5px solid #39a039;
    border-radius: 15px; /* Bordes redondeados más pronunciados */
}

Rounder border

div {
    border: 5px solid #39a039;
    border-radius: 30px; /* Bordes más redondeados */
}

Roundest border

div {
    border: 5px solid #39a039;
    border-radius: 50px; /* Bordes extremadamente redondeados */
}

Estos ejemplos muestran cómo varía el aspecto de los bordes con diferentes valores de la propiedad border-radius. Cuanto mayor sea el valor, más redondeados serán los bordes.

Ejemplos visuales de CSS Rounded Borders

Normal border

Este cuadro tiene bordes ligeramente redondeados con un radio de 5px.

Round border

Este cuadro tiene bordes más redondeados con un radio de 15px.

Rounder border

Este cuadro tiene bordes aún más redondeados con un radio de 30px.

Roundest border

Este cuadro tiene los bordes extremadamente redondeados con un radio de 50px.

---

Ir al índice

---

---