Bordes CSS: propiedad abreviada

Tabla de contenido

    Mostrar tabla de contenidos

Borde CSS: propiedad abreviada

Como vio en la página anterior, hay muchas propiedades a considerar cuando se trata de fronteras.

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

La propiedad border es una propiedad abreviada para las siguientes propiedades de borde individuales:

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

Ejemplo

p {	border: 5px solid red;
}

Resultado :

Some text

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-color.</p>

</body>
</html>

También puede especificar todas las propiedades de borde individuales para un solo lado:

Borde izquierdo

p {	border-left: 6px solid red;
}

Resultado :

Some text

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-left Property</h2>
<p>This property is a shorthand property for border-left-width, border-left-style, and border-left-color.</p>

</body>
</html>

Borde inferior

p {	border-bottom: 6px solid red;
}

Resultado :

Some text

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-bottom Property</h2>
<p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p>

</body>
</html>