Característica de Border en CSS

por
CSS border

Tabla de contenidos

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 inicialborder-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 aTodos los artículos.
HeredableNo
Animablesí

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ísticaChromeFirefoxInternet ExplorerÓperaSafari
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.