CSS
Frontera

Sintaxis

• frontera

• borde: borde-ancho borde-estilo borde-color | inicial | heredar;

• borde superior: borde ancho ancho borde estilo color | inicial | heredar;

• borde inferior: borde ancho ancho borde estilo color | inicial | heredar;

• borde izquierdo: borde ancho ancho borde estilo color | inicial | heredar;

• borde derecho: borde ancho ancho borde estilo color | inicial | heredar;

• estilo de borde

• estilo de borde: 1-4 ninguno | oculto | punteado | punteado | sólido doble | surco cresta inserción inicio | inicial | heredar;

• radio del borde

• radio de borde: 1-4 longitud | % / 1-4 de longitud | % | inicial | heredar;

• borde superior-izquierdo-radio: longitud | % [longitud | %] | inicial | heredar;

• borde superior-derecho-radio: longitud | % [longitud | %] | inicial | heredar;

• borde inferior-izquierdo-radio: longitud | % [longitud | %] | inicial | heredar;

• borde inferior-derecho-radio: longitud | % [longitud | %] | inicial | heredar;

• imagen de borde

• border-image: border-image-source border-image-slice [border-image-width [border-image-outset]] border-image-repeat

• borde-imagen-fuente: ninguna | imagen;

• borde-imagen-rebanada: 1-4 número | porcentaje [relleno]

• borde-imagen-repetición: 1-2 estiramiento | repetir redondo | espacio

• colapso de la frontera

• colapso de la frontera: separado | colapso | inicial | heredar

Observaciones

radio del borde

La propiedad border-radius le permite cambiar la forma del modelo de caja básico.

Cada esquina de un elemento puede tener hasta dos valores, para el radio vertical y horizontal de esa esquina (para un máximo de 8 valores).

El primer conjunto de valores define el radio horizontal. El segundo conjunto de valores opcional, precedido por una '/', define el radio vertical. Si solo se suministra un conjunto de valores, se utiliza tanto para el radio vertical como para el horizontal.

border-radius: 10px 5% / 20px 25em 30px 35em;

El 10px es el radio horizontal de la parte superior izquierda y de la parte inferior derecha. Y el 5% es el radio horizontal de la parte superior derecha e inferior izquierda. Los otros cuatro valores después de '/' son los radios verticales para la parte superior izquierda, superior derecha, inferior derecha e inferior izquierda.

Al igual que con muchas propiedades de CSS, las abreviaturas se pueden utilizar para cualquiera o todos los valores posibles. Por lo tanto, puede especificar cualquier cosa de uno a ocho valores. La siguiente taquigrafía le permite establecer el radio horizontal y vertical de cada esquina al mismo valor:

HTML:

<div class='box'></div>

CSS:

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

El radio de borde es más comúnmente usado para convertir elementos de caja en círculos. Al establecer el radio del borde en la mitad de la longitud de un elemento cuadrado, se crea un elemento circular:

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

Debido a que el radio del borde acepta porcentajes, es común usar el 50% para evitar el cálculo manual del valor del radio del borde:

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

Si las propiedades de ancho y alto no son iguales, la forma resultante será un óvalo en lugar de un círculo.

Ejemplo de radio de borde específico del navegador:

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

estilo de borde

La propiedad de border-style establece el estilo del borde de un elemento. Esta propiedad puede tener de uno a cuatro valores (para cada lado del valor del elemento uno).

Ejemplos:

border-style: dotted;

border-style: dotted solid double dashed;

border-style también puede tener los valores none y hidden . Tienen el mismo efecto, excepto trabajos hidden para la resolución de conflictos de borde para elementos <table> . En una <table> con múltiples fronteras, none tiene la prioridad más baja (es decir, en un conflicto, la frontera mostraría), y hidden tiene la prioridad más alta (es decir, en un conflicto, la frontera no se mostraría).

frontera (taquigrafía)

En la mayoría de los casos, desea definir varias propiedades de borde ( border-width border-style border-color ) para todos los lados de un elemento.

En lugar de escribir:

border-width: 1px;
border-style: solid;
border-color: #000;

Usted puede simplemente escribir:

border: 1px solid #000;

Estas abreviaturas también están disponibles para todos los lados de un elemento: border-top , border-left , border-right y border-bottom . Así que puedes hacer:

border-top: 2px double #aaaaaa;

imagen de borde

Con la propiedad de border-image tiene la posibilidad de configurar una imagen para usarla en lugar de los estilos de borde normales.

Una border-image consiste esencialmente en una

• border-image-source : la ruta a la imagen que se usará
• border-image-slice : especifica el desplazamiento que se usa para dividir la imagen en nueve regiones (cuatro esquinas , cuatro bordes y un centro )
• border-image-repeat : especifica cómo se escalan las imágenes de los lados y la mitad de la imagen del borde

Considere el siguiente ejemplo wheras border.png es una imagen de 90x90 píxeles:

border-image: url("border.png") 30 stretch;

La imagen se dividirá en nueve regiones con 30x30 píxeles. Los bordes se utilizarán como las esquinas del borde, mientras que los lados se utilizarán en el medio. Si el elemento es mayor / se estirará más ancha que 30px esta parte de la imagen. La parte media de la imagen por defecto es transparente.

borde- [izquierda | derecha | arriba | abajo]

La border-[left|right|top|bottom] se usa para agregar un borde a un lado específico de un elemento.

Por ejemplo, si desea agregar un borde al lado izquierdo de un elemento, puede hacer:

#element {
    border-left: 1px solid black;
}

colapso de la frontera

La propiedad border-collapse solo se aplica a la table s (y los elementos mostrados como display: table o inline-table ) y establece si los bordes de la tabla se contraen en un solo borde o se separan como en el HTML estándar.

table {
  border-collapse: separate; /* default */
  border-spacing: 2px; /* Only works if border-collapse is separate */
}

Ver también Tablas - entrada de documentación de colapso de borde

Múltiples fronteras

Utilizando esquema:

.div1{
  border: 3px solid black; 
  outline: 6px solid blue;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Usando box-shadow:

.div2{
  border: 5px solid green; 
  box-shadow: 0px 0px 0px 4px #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Usando un pseudo elemento:

.div3 {
  position: relative;
  border: 5px solid #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.div3:before {
  content: " ";
  position: absolute;
  border: 5px solid blue;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

Creando un borde multicolor usando una imagen de borde

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

HTML

<div class='bordered'>Border on all sides</div>

El ejemplo anterior produciría un borde que se compone de 5 colores diferentes. Los colores se definen a través de un linear-gradient (puede encontrar más información sobre los degradados en los documentos ). Puede encontrar más información sobre la propiedad border-image-slice en el ejemplo de border-image en la misma página.

( Nota: Se agregaron propiedades adicionales al elemento para fines de presentación ) .

Habría notado que el borde izquierdo tiene un solo color (el color de inicio del degradado), mientras que el borde derecho también tiene un solo color (el color final del degradado). Esto se debe a la forma en que funciona la propiedad de imagen de borde. Es como si el degradado se aplicara a todo el cuadro y luego se enmascararan los colores de las áreas de relleno y contenido, por lo que parece que solo el borde tiene el degradado.

Los bordes que tienen un solo color dependen de la definición del degradado. Si el degradado es un degradado to right , el borde izquierdo sería el color de inicio del degradado y el borde derecho sería el color final. Si se tratara de un gradiente to bottom el borde superior sería el color de inicio del degradado y el borde inferior sería el color final. A continuación se muestra la salida de un gradiente de color de to bottom 5.

Si el borde solo se requiere en lados específicos del elemento, la propiedad de border-width se puede usar como con cualquier otro borde normal. Por ejemplo, agregar el siguiente código produciría un borde solo en la parte superior del elemento.

border-width: 5px 0px 0px 0px;

Tenga en cuenta que cualquier elemento que tenga border-image propiedad de border-image no respetará el border-radius (es decir, el borde no se curvará). Esto se basa en la siguiente declaración en la especificación:

Los fondos de una caja, pero no su imagen de borde, se recortan a la curva apropiada (según lo determinado por 'clip de fondo').