Característica de Border en CSS

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
- Estructura de uso
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 value `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium` `border-style`: short value `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none` `border-color`: short value `border-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 borderse 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, y border-color.
La página de propiedades que establece partes del marco: marco superior border-top, border-bottom marco inferior border-right, marco derecho y marco izquierdo border-left.
Configure una imagen para el marco usando la función border-image.
Esquinas redondeadas border-radius.