Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad del borde derecho
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada borde derecho Con sintaxis y ejemplos.
describir
La propiedad border-right de CSS define el ancho, el estilo de línea y el color del borde derecho del cuadro. Es una propiedad abreviada para configurar las propiedades CSS border-right-width, border-right-style y border-right-color.
sintaxis
La sintaxis de la propiedad CSS border-right es:
border-right: border-right-width border-right-style border-right-color;parámetro o parámetro
border-right-width es el ancho del borde derecho del cuadro, que puede ser uno de los siguientes:
(Si no se proporciona el ancho del borde derecho, el valor predeterminado es medio)
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … div { borde derecho: 3px; } |
| finamente | Ancho de borde delgado, puede ser 1px o 2px dependiendo del navegador div { borde derecho: delgado; } |
| Moderar | Ancho de borde medio, puede ser de 3px o 4px dependiendo del navegador div { borde derecho: medio; } |
| Grueso | Ancho derecho del borde grueso, puede ser 5px o 6px dependiendo del navegador div { borde derecho: grueso; } |
border-right-style es el estilo de línea para el borde derecho del cuadro, que puede ser uno de los siguientes:
(el valor predeterminado es ninguno si no se proporciona el estilo del borde derecho)
| valor | describir |
|---|---|
| no cualquiera | Sin borde derecho (este es el valor predeterminado) div { borde derecho: ninguno; } |
| duro | simple, recto, sólido div { borde derecho: sólido; } |
| embellecido | serie de puntos div {borde derecho: punteado;} |
| linea punteada | Serie de guiones div { borde derecho: línea punteada; } |
| doble | Dos líneas, totalizando la cantidad de píxeles definidos por border-right-width div { borde derecho: doble; } |
| ranura | efecto de grabado div { borde derecho: surco; } |
| cresta | El borde derecho parece una apariencia 3D “afuera” (opuesto al surco) div { borde derecho: cresta; } |
| ilustración | Apariencia incrustada div {borde derecho: inserción;} |
| al principio | Apariencia en relieve (a diferencia de la ilustración) div { borde derecho: inicio; } |
| oculto | el borde está oculto div { borde derecho: oculto; } |
| heredar | El elemento heredará el estilo de borde derecho de su elemento principal div { borde derecho: heredar; } |
border-right-color es el color del borde derecho del cuadro, que puede ser uno de los siguientes:
| valor | describir |
|---|---|
| #RRGGBB | Representación hexadecimal del color del borde derecho div { borde derecho: #FF0000; } |
| RGB() | Representación RGB del color del borde derecho div {borde derecho: rgb(255,0,0); } |
| nombre | El nombre del color del borde (es decir, rojo, azul, negro, blanco) div { borde derecho: rojo; } |
| transparente | No muestre los bordes pero aún así ocupe espacio en la página div { borde derecho: transparente; } |
| heredar | El elemento heredará el color del borde derecho de su elemento principal div { borde derecho: heredar; } |
notas
- Al usar la propiedad border-right, puede proporcionar uno o todos los valores (valores border-right-width, border-right-style y border-right-width), y puede proporcionarlos en cualquier orden.
- Debe proporcionar un valor para border-right-style para mostrar el borde derecho.
- Consulte también las propiedades border-right-color, border-right-style y border-right-width.
- ¿Necesita convertir sus valores de color a una representación diferente? Pruebe esta herramienta en línea para convertir sus valores de color entre hexadecimal y RGB.
Compatibilidad del navegador
La propiedad CSS border-right tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- androide
- Firefox (Geco)
- Firefox móvil (Geco)
- Navegador de Internet (IE)
- es decir, móvil
- ópera
- Ópera Móvil
- Safari (WebKit)
- Safari para móvil
ejemplo
Discutiremos la propiedad border-right a continuación, explorando ejemplos de cómo usarla en CSS.
Por ejemplo:
div { border-right: solid; }En este ejemplo del borde derecho de CSS, vamos a
A continuación, veremos un ejemplo de borde derecho de CSS, donde proporcionamos valores de ancho de borde derecho, estilo de borde derecho y color de borde derecho.
div { border-right: 3px solid blue; }En este ejemplo de borde derecho de CSS, configuramos el ancho del borde derecho en 3 px, el estilo del borde derecho en sólido y el color del borde derecho en azul.
Podemos reescribir este ejemplo usando valores hexadecimales azules de la siguiente manera:
div { border-right: 3px solid #0000FF; }O podríamos reescribir este ejemplo usando el valor blue rgb() de la siguiente manera:
div { border-right: 3px solid rgb(0,0,255); }