
Tabla de contenidos
- Funciones de usos del border en CSS
- Ejemplos del uso CSS border
- Soporte del uso CSS border en navegadores
- Funcionamiento general del CSS border
- Temas relacionados para complementar
Una propiedad border
en CSS es una propiedad abreviada que establece los valores de los atributos que controlan el marco del elemento al mismo tiempo son: border-color
, border-style
y border-width
.
Como con todas las propiedades abreviadas, cualquier valor indefinido se restablecerá a su valor inicial. Además, la propiedad border
no se puede utilizar para especificar un valor para la propiedad, border-image
pero establecerá su valor en el valor inicial none
.
border: 1px ; border: 2px dotted; border: medium dashed green;
Es una buena idea usar la propiedad border
si desea establecer todos los marcos en un solo valor. Si desea que cada extremo del marco tenga su propio valor, es posible que desee usar los atributos border-width
y border-style
. El border-color
le permiten configurar a cuatro valores o sea un valor para cada lado del marco. Pero mientras que la propiedad le border
permite establecer un valor único que se aplicará a todos los lados del marco del elemento.
Funciones de usos del border en CSS
Valor inicial | border-width : short valueborder-top-width : medium border-right-width : medium border-bottom-width : medium border-left-width : medium border-style : short valueborder-top-style : none border-right-style : none border-bottom-style : none border-left-style : none border-color : short valueborder-top-color : currentcolor border-right-color : currentcolor border-bottom-color : currentcolor border-left-color : currentcolor |
---|---|
Aplicado a | Todos los artículos. |
Heredable | No |
Animable | sí |
Ejemplos del uso CSS border
En el siguiente ejemplo, demostraremos tres formas de definir el marco de un elemento. Tenga en cuenta que las propiedades cuyo valor no esté especificado por la propiedad corta border
se restablecerán al valor inicial .
Código HTML:
<div> <div class = "solid" > Referencia del texto 1. </div> <div class = "dotted" > Referencia del texto 2. </div> <div class = "dashed" > Referencia del texto 3. </div> </div>
Código CSS:
div> div{ float: right; margin: 10px; } .solid{ border-style: dotted; border: solid; } .dotted{ border: 2px dotted; } .dashed{ border: medium dashed green; }
Soporte del uso CSS border en navegadores
Característica | Chrome | Firefox | Internet Explorer | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 4 | 3.5 | 1.0 |
Funcionamiento general del CSS border
Esta propiedad acorta tres propiedades, cuyos valores se pueden especificar en cualquier orden, y se pueden omitir uno o dos de esos valores.
<br-width>
<br-style>
<color>
Estructura de uso
border: < br-width > || <br-style> || < color >;
Los valores que pueden tener y se les pueden colocar en el orden que desee.
<br-width > = < length > | thin | medium | thick <br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <nomed-color> | currentcolor | <deprecated-system-color>
Temas relacionados para complementar
- La página de propiedades establecido por la propiedad de acceso directo
border
:border-width
,border-style
, yborder-color
. - La página de propiedades que establece partes del marco: marco superior
border-top
,border-bottom
marco inferiorborder-right
, marco derecho y marco izquierdoborder-left
. - Configure una imagen para el marco usando la función
border-image
. - Esquinas redondeadas
border-radius
.
- Múltiples Constantes en TypeScript
- Estructura de Datos las Colas
- Estructura de Datos las Pilas (Stack)
- Widget Drawer en Flutter
- Clase Scaffold en Flutter
- Estructura del lenguaje Python
- Iteradores y generadores en TypeScript
- Símbolo en TypeScript (Symbol)
- Tipos Avanzados en TypeScript
- Tipos de Compatibilidad en TypeScript
- Inferir Tipos en TypeScript
- Tipos Generalizados (Generics) en TypeScript
- Tipos Básicos de Datos en TypeScript
- Interfaces en TypeScript
- Declaración de Variables en TypeScript
- Funciones en TypeScript
- Categorías en TypeScript
- Introducción a TypeScript
- Clase MaterialApp en Flutter
- Clase Container en Flutter
- ¿Qué son los Widgets en Flutter?
- Introducción a la Arquitectura de Aplicaciones con Flutter
- Lista Doblemente Enlazada
- Listas Vinculadas en Estructura de Datos
- Introducción a las Matrices(Arrays)
- Estructuras de Datos en los Algoritmos de Programación
- Expresión const en JavaScript
- Expresión let en JavaScript
- Introducción al Lenguaje de Programación CSS
- Intérprete de Python