Latest web development tutorials

Frontera CSS (fronteras)

propiedades de borde CSS

propiedades de borde CSS permiten especificar el estilo borde de un elemento y el color.

Estilo de borde

Propiedad estilo de borde especifica qué tipo de borde que desea visualizar.

observación la propiedadborder-style se utiliza para definir el estilo de la frontera

valor de border-style:

Ninguno: Sin borde predeterminado

salpicado: punteado: Define una marquesina

discontinua: Define un cuadro de líneas discontinuas

sólido: la definición de borde continuo

doble: definir dos límites. Los mismos valores de la anchura de dos fronteras y border-width de

ranura: ranura definida borde 3D. El efecto depende de los valores de color de la frontera

canto: la definición de los bordes canto 3D. El efecto depende de los valores de color de la frontera

Recuadro: Define un borde 3D incorporado. El efecto depende de los valores de color de la frontera

principio: Define un borde de inicio 3D. El efecto depende de los valores de color de la frontera

Probar: establecer el estilo de borde


Ancho del borde

Se puede especificar el ancho del borde por el atributo border-width.

Especifica el ancho de la frontera de dos maneras: Se puede especificar la longitud del valor, tales como 2px o 0.1em; o utilizar una de las tres palabras clave, que son delgadas, medio (por defecto) y grueso.

Nota: CSS no define tres palabras clave ancho específico, por lo que un agente de usuario puede ser el fino, medio y grueso ajustado respectivamente iguales a 5px, 3px y 2px, mientras que otro agente de usuario, respectivamente, ajustado a 3px, 2px y 1px.

Ejemplos

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Trate »


color del borde

la propiedad border-color establece el color de la frontera. Puede ajustar el color:

  • Nombre - Especifica el nombre del color, como "rojo"
  • RGB - especificar un valor RGB, tales como "rgb (255,0,0)"
  • Hex - Especifica el valor hexadecimal, como por ejemplo "# ff0000"

También puede establecer el color del borde de "transparente".

Nota: border-color por sí solo no trabajar, que debe tener para usar el estilo de borde para establecer el estilo de borde.

Ejemplos

p.one
{
Border-style: sólido;
border-color: rojo;
}
p.two
{
Border-style: sólido;
border-color: # 98bf21;
}

Trate »


Frontera - ajustes separados para cada lado

En CSS, puede especificar diferentes lados diferentes fronteras:

Ejemplos

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Trate »

El ejemplo anterior también puede establecer un único atributo:

Ejemplos

border-style:dotted solid;

Trate »

establecimiento de estilo frontera puede tener de uno a cuatro valores:

  • Border-style: punteado doble sólida discontinua ;
    • Las fronteras están salpicadas
    • borde derecho es sólida
    • Un borde doble fondo
    • borde izquierdo es discontinua

  • frontera de estilo: dobles de trazo discontinuo sólido;
    • Las fronteras están salpicadas
    • La izquierda y la orilla derecha es sólida
    • Un borde doble fondo

  • frontera de estilo: punteado sólido;
    • En la parte inferior es borde de puntos
    • fronteras derecha e izquierda son sólidos

  • frontera de estilo: punteado;
    • Rodeada por un borde de puntos

El ejemplo anterior utiliza el estilo de borde. Sin embargo, también puede ser border-width, border-color juntos.


Frontera - propiedad abreviada

El ejemplo anterior utiliza una gran cantidad de propiedad para establecer la frontera.

T También puede establecer la frontera en una propiedad.

Puede atributo "frontera" set:

  • border-width
  • Border-style (requerido)
  • border-color

Ejemplos

border:5px solid red;

Trate »


Ejemplos

más ejemplos

Todas las propiedades de borde de ser una declaración
Este ejemplo demuestra una propiedad abreviada para establecer las cuatro propiedades de borde en el mismo comunicado.

Configuración de estilo de borde
Este ejemplo muestra cómo establecer el estilo del borde inferior.

Ajuste de la anchura del borde izquierdo
Este ejemplo muestra cómo establecer el ancho del borde izquierdo.

Ajuste el color de los cuatro bordes
Este ejemplo muestra cómo establecer el color de los cuatro bordes. Puede configurar uno a cuatro colores.

Establecer el color del borde derecho
Este ejemplo muestra cómo establecer el color del borde derecho.


propiedades de borde CSS

propiedad descripción
frontera Abreviación de las propiedades se utiliza para establecer la propiedad de los cuatro lados en un comunicado.
Border-style Se utiliza para establecer el estilo de borde de todos los elementos, o por separado establecer el estilo de borde para cada lado.
border-width Todo frontera propiedad abreviada establece el ancho para el elemento, o ajustar individualmente el ancho a cada lado de la frontera.
border-color Abreviación de las propiedades, el elemento de toda la porción de borde visible colores, o establecer el color, respectivamente cuatro lados.
border-bottom Abreviación de las propiedades utiliza para establecer todos los atributos de la frontera con un comunicado.
border-bottom-color de Ajuste el color del borde inferior del elemento.
-Inferior-estilo de borde Configuración de los elementos de estilo frontera.
border-bottom-ancho Ajuste el ancho del borde inferior del elemento.
border-left Abreviación de las propiedades permite configurar todas las propiedades del borde izquierdo en un comunicado.
border-left-color de Establecer el color del elemento de borde izquierdo.
border-left-estilo El elemento del estilo del borde izquierdo.
border-left-ancho El elemento de la anchura del borde izquierdo.
border-right propiedad abreviada para establecer todas las propiedades a la derecha de la caja con un comunicado.
border-right-color de Establecer el color del elemento de borde derecho.
border-right-estilo El elemento de los estilos de borde recto.
border-right-ancho Establecer la anchura del elemento de borde derecho.
border-top propiedad abreviada para establecer todas las propiedades en la frontera de un comunicado.
border-top-color de Elemento se encuentra en el color de la frontera.
-Estilo de borde superior Elemento se encuentra en el estilo de borde.
border-top-ancho Elemento se encuentra en la anchura de la frontera.