Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS límite


Propiedades del borde CSS

Los CSS border propiedades le permiten especificar el estilo, el ancho y el color del borde de un elemento.

Este elemento tiene un borde de ranura que es de 15 píxeles de ancho y verde.


Estilo de borde

El border-style propiedad especifica qué tipo de frontera que se vea.

Se permiten los siguientes valores:

  • dotted - Define un borde de puntos
  • dashed - Define un borde punteado
  • solid - Define un borde continuo
  • double - Define un borde doble
  • groove - Define un borde acanalado 3D. El efecto depende del valor de border-color
  • ridge - Define un borde estriado 3D. El efecto depende del valor de border-color
  • inset - Define una frontera inserción 3D. El efecto depende del valor de border-color
  • outset - Define un borde principio 3D. El efecto depende del valor de border-color
  • none - Define ninguna frontera
  • hidden - Define una frontera oculto

El border-style propiedad puede tener de uno a cuatro valores (por el borde superior, borde derecho, borde inferior y el borde izquierdo).

Ejemplo

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Resultado:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Inténtalo tú mismo "
NotaNota: Ninguna de las otras propiedades de borde CSS se describen a continuación tendrán ningún efecto a menos que el border-style propiedad se establece!

Ancho del borde

El border-width propiedad especifica el ancho de los cuatro bordes.

El ancho se puede establecer como un tamaño específico (en px, pt, cm, em , etc) o mediante el uso de uno de los tres valores predefinidos: fino, medio o grueso.

El border-width propiedad puede tener de uno a cuatro valores (por el borde superior, borde derecho, borde inferior y el borde izquierdo).

Ejemplo

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

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

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
Inténtalo tú mismo "

Color del borde

El border-color propiedad se utiliza para establecer el color de los cuatro bordes.

El color se puede ajustar por:

  • name - especificar un nombre de color, como "red"
  • Hex - especificar un valor hexadecimal, como "#ff0000"
  • RGB - especificar un valor RGB, como "rgb(255,0,0)"
  • transparent

El border-color propiedad puede tener de uno a cuatro valores (por el borde superior, borde derecho, borde inferior y el borde izquierdo).

Si border-color no está establecido, se hereda el color del elemento.

Ejemplo

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}
Inténtalo tú mismo "

Frontera - Lados individuales

De los ejemplos anteriores que han visto que es posible especificar un borde diferente para cada lado.

En CSS, también hay propiedades para especificar cada uno de los bordes (superior, derecho, inferior e izquierda):

Ejemplo

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
Inténtalo tú mismo "

El ejemplo anterior muestra el mismo resultado que esto:

Ejemplo

p {
    border-style: dotted solid;
}
Inténtalo tú mismo "

Así pues, aquí es cómo funciona:

Si el border-style propiedad tiene cuatro valores:

  • border-style : punteado doble sólida discontinua;
    • el borde superior está salpicado
    • borde derecho es sólida
    • borde inferior es el doble
    • borde izquierdo es discontinua

Si el border-style propiedad tiene tres valores:

  • border-style : dobles de trazo discontinuo sólido;
    • el borde superior está salpicado
    • fronteras derecha e izquierda son sólidos
    • borde inferior es el doble

Si el border-style propiedad tiene dos valores:

  • border-style : punteado sólido;
    • bordes superior e inferior están salpicadas
    • fronteras derecha e izquierda son sólidos

Si el border-style propiedad tiene un valor:

  • border-style : punteado;
    • los cuatro bordes están salpicadas

El border-style propiedad se utiliza en el ejemplo anterior. Sin embargo, también funciona con border-width y border-color .


Frontera - Abreviación de las propiedades

Como se puede ver en los ejemplos anteriores, hay muchas propiedades a tener en cuenta cuando se trata de las fronteras.

Para acortar el código, también es posible especificar todos los propiedades de borde individuales en una propiedad.

La border la propiedad es una propiedad resumida para las siguientes propiedades de bordes individuales:

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

Ejemplo

p {
    border: 5px solid red;
}
Inténtalo tú mismo "

Ejemplos

Más ejemplos

Todas las propiedades del borde superior en una declaración
Este ejemplo demuestra una propiedad abreviada para establecer todas las propiedades para el borde superior en una declaración.

Ajuste el estilo del borde inferior
Este ejemplo muestra cómo establecer el estilo del borde inferior.

Ajuste el ancho 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 tener de uno a cuatro colores.

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


Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»


Todas las propiedades de borde CSS

Propiedad Descripción
border Establece todas las propiedades de borde en una declaración
border-bottom Establece todas las propiedades del borde inferior de una declaración
border-bottom-color Establece el color del borde inferior
border-bottom-style Define el estilo del borde inferior
border-bottom-width Establece el ancho del borde inferior
border-color Establece el color de los cuatro bordes
border-left Establece todas las propiedades de los bordes que quedan en una declaración
border-left-color Establece el color del borde izquierdo
border-left-style Define el estilo del borde izquierdo
border-left-width Establece el ancho del borde izquierdo
border-right Establece todas las propiedades del borde derecho en una declaración
border-right-color Establece el color del borde derecho
border-right-style Define el estilo del borde derecho
border-right-width Establece el ancho del borde derecho
border-style Define el estilo de los cuatro bordes
border-top Establece todas las propiedades del borde superior de una declaración
border-top-color Establece el color del borde superior
border-top-style Define el estilo del borde superior
border-top-width Establece el ancho del borde superior
border-width Establece el ancho de los cuatro bordes