English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
border-el atributo de estilo CSS se utiliza para establecer el atributo de estilo de borde único, es decirborder-top-style，border-right-style，border-bottom-styleyborder-left-stylepropiedad abreviada.
la tabla a continuación describe el uso y el historial de versiones de esta propiedad, así como su sintaxis de uso en scripts de JavaScript.
| valor por defecto: | none |
|---|---|
| aplicable a: | todos los elementos |
| heredado: | ninguno |
| animable: | no.ver propiedad de animación。 |
| versión: | CSS 1，2，3 |
| JavaScript sintaxis: | object object.style.borderStyle="dotted double" |
La sintaxis de este atributo es la siguiente:
border-style: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] 1 a 4 values | initial | inherit
este atajo puede adoptar un, dos, tres o cuatro valores separados por espacios en blanco.
si se especificaun valorentonces se aplicará a todos los cuatro bordes.
si se especificados valoresentonces el primer valor se aplicará a los bordes superior e inferior, y el segundo valor se aplicará a los bordes laterales derecho e izquierdo.
si se especificatres valoresentonces el primer valor se aplicará al borde superior, el segundo valor se aplicará a los bordes laterales, y el tercero valor se aplicará al borde inferior.
si se especificacuatro valoressi se especifican, cada valor se aplicará en el orden superior, derecho, inferior e izquierdo a los bordes.
A continuación, se muestra un ejemplo de cómo usar border-atributo de estilo.
p {
border-style: double;
border-ancho: 5px;
}Prueba para ver‹/›La tabla a continuación describe los valores de este atributo.
| Valor | Descripción |
|---|---|
| none | Sin borde visible. |
| hidden | Igual que none, la diferencia radica en que las celdas de la tabla tienenBorde plegadoY las dos celdas comparten el borde. El valor hidden asegura que no se dibuje el borde, ya que hidden tiene prioridad sobre todos los otros estilos de borde. |
| dotted | Muestra el borde como una serie de puntos. |
| dashed | Muestra el borde como una serie de segmentos cortos, es decir, guiones. |
| solid | Muestra el borde como una línea continua. |
| double | Muestra el borde como dos líneas paralelas continuas, dejando un espacio entre ellas. La suma de las dos líneas y el espacio entre ellas es igual aborder-widthdel valor. |
| groove | Muestra un borde grabado en el lienzo. Da una impresión3La impresión de D, generalmente lograda usando colores más claros que el color del borde.border-colorcreada mediante una sombra de dos colores más claros y más oscuros. |
| ridge | Muestra un borde groove que es opuesto al efecto. También da una impresión3La impresión de D, el borde parece salir del lienzo. |
| inset | Muestra un borde que hace que el cuadro del elemento parezca estar incrustado en el lienzo. Da una impresión3D, lo que generalmente se logra creando una sombra de dos colores, más claros que el color del borde.border-colorligeramente más clara y más oscura. |
| outset | Muestra un borde inset que es opuesto al efecto. También da una impresión3La impresión de D, el borde hace que la caja parezca salir del lienzo. |
| inherit | Si se especifica, el elemento asociado utiliza el borde del elemento padre-top-Valor del atributo style. |
border-La compatibilidad del atributo style del navegador, los números en la tabla a continuación representan la versión mínima del navegador que admite la propiedad; todos los navegadores principales admiten esta propiedad.
Compatibilidad del navegador-
|
Advertencia: Internet Explorer 7y versiones anteriores no soportan el valor hidden. IE8Soporta, pero necesita una<!DOCTYPE>。9y versiones posteriores soportan el valor hidden. IE
Vea el tutorial:CSS Borde，CSS3 Borde。
Propiedades relacionadas:border，border-width，border-color，border-top-style，border-right-style，border-bottom-style，border-left-style。