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 de estilo superior del borde
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada estilo de borde superior Con sintaxis y ejemplos.
describir
La propiedad CSS border-top-style define el estilo de línea del borde superior de un cuadro.
sintaxis
La sintaxis de la propiedad CSS estilo borde superior es:
border-top-style: value;parámetro o parámetro
valor
El estilo de línea utilizado para el borde superior. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| no cualquiera | Sin bordes (este es el valor predeterminado) div {estilo superior del borde: ninguno;} |
| duro | simple, recto, sólido div {estilo superior del borde: sólido;} |
| embellecido | serie de puntos div {border-top-estilo: punteado;} |
| linea punteada | Serie de guiones div {estilo superior del borde: discontinuo;} |
| doble | Las dos líneas se suman a la cantidad de píxeles definidos por el ancho superior del borde div {estilo superior del borde: doble;} |
| ranura | efecto de grabado div {estilo superior del borde: surco;} |
| cresta | Parece que el borde está “saliendo” del aspecto 3D (frente a la ranura) div {estilo superior del borde: cresta;} |
| ilustración | Apariencia incrustada div {estilo superior del borde: inserción;} |
| al principio | Apariencia en relieve (a diferencia de la ilustración) div {estilo superior del borde: inicio;} |
| oculto | el borde está oculto div {estilo superior del borde: oculto;} |
| heredar | El elemento heredará el estilo superior del borde de su elemento principal div {estilo superior del borde: heredar;} |
notas
- Dado que el valor predeterminado del estilo superior del borde CSS es ninguno, debe establecer el valor del estilo superior del borde CSS para mostrar el borde superior.
- Consulte también las propiedades border-top-color, border-top-width y border-top.
Compatibilidad del navegador
La propiedad CSS border-top-style 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-top-style a continuación, explorando ejemplos de cómo usarla en CSS.
Veamos un ejemplo de configuración de un borde superior sólido.
div { border-top-style: solid; }En este ejemplo de estilo de borde superior CSS, diseñamos el borde superior con un color sólido.
Hay otros estilos para elegir. Intentemos configurar el borde superior en el doble.
div { border-top-style: double; border-top-color: blue; }En este ejemplo de estilo de borde superior, configuramos el estilo de borde superior en una doble línea azul.