El borde CSS es una propiedad clave que se utiliza para caracterizar y diseñar los bordes alrededor de los componentes HTML. Los bordes desempeñan un papel vital en la composición de un sitio web, ayudando a crear separación, énfasis y atractivo elegante. En CSS, puedes utilizar algunas propiedades relacionadas con los bordes para controlar el estilo, la variedad, el tamaño y la forma de estos bordes. En este artículo, investigaremos estas propiedades de borde CSS y cómo utilizarlas realmente.
Propiedades del borde CSS
Las propiedades de borde CSS se utilizan para determinar el estilo, la variedad, el ancho y el flujo y reflujo de los bordes de un componente. Estas propiedades incluyen:
- estilo de borde
- color del borde
- ancho del borde
- radio-frontera
1) estilo de borde CSS
La propiedad Estilo de borde se utiliza para especificar el tipo de borde que desea mostrar en la página web.
Hay algunos valores de estilo de borde que se utilizan con la propiedad de estilo de borde para definir un borde.
| Valor | Descripción |
|---|---|
| ninguno | No define ninguna frontera. |
| punteado | Se utiliza para definir un borde de puntos. |
| discontinuo | Se utiliza para definir un borde discontinuo. |
| sólido | Se utiliza para definir un borde sólido. |
| doble | Define dos bordes con el mismo valor de ancho de borde. |
| ranura | Define un borde ranurado 3D. El efecto se genera según el valor del color del borde. |
| cresta | Define un borde estriado en 3D. El efecto se genera según el valor del color del borde. |
| recuadro | Define un borde insertado en 3D. El efecto se genera según el valor del color del borde. |
| comienzo | Define un borde inicial 3D. El efecto se genera según el valor del color del borde. |
Ejemplo:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border Producción:
2) ancho de borde CSS
La propiedad border-width se utiliza para establecer el ancho del borde. Está configurado en píxeles. También puede utilizar uno de los tres valores predefinidos, fino, medio o grueso para establecer el ancho del borde.
Nota: La propiedad de ancho de borde no se utiliza sola. Se utiliza constantemente con otras propiedades de borde, como la propiedad 'estilo de borde' para establecer el borde primero, de otra manera no funcionará.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border Producción:
3) color del borde CSS
Hay tres estrategias para establecer el color del borde.
- Nombre: Determina el nombre del color. Por ejemplo: 'rojo'.
- RGB: Determina el valor RGB del color. Por ejemplo: 'rgb(255,0,0)'.
- Hexadecimal: Determina el valor hexadecimal del color. Por ejemplo: '#ff0000'.
Nota: La propiedad border-color no se utiliza sola. Se utiliza constantemente con otras propiedades de borde, como la propiedad 'estilo de borde' para establecer el borde primero, de otra manera no funcionará.
Ejemplo:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover Producción:
