Frontera - Trucos CSS

La borderpropiedad es una sintaxis abreviada en CSS que acepta múltiples valores para dibujar una línea alrededor del elemento al que se aplica.

.box ( border: 3px solid red; height: 200px; width: 200px; )

Valores

La borderpropiedad acepta uno o más de los siguientes valores en combinación:

border: || || 

• border-width: Especifica el grosor del borde.
  • : Un valor numérico medido en px, em, rem, vhy vwunidades.
  • thin: El equivalente de 1px
  • medium: El equivalente de 3px
  • thick: El equivalente de 5px
• border-style: Especifica el tipo de línea dibujada alrededor del elemento, que incluye:
  • solid: Una línea sólida y continua.
  • none (predeterminado): no se traza ninguna línea.
  • hidden: Se dibuja una línea, pero no es visible. esto puede ser útil para agregar un poco más de ancho a un elemento sin mostrar un borde.
  • dashed: Una línea que consta de guiones.
  • dotted: Una línea que consta de puntos.
  • double: Se dibujan dos líneas alrededor del elemento.
  • groove: Agrega un bisel basado en el valor de color de una manera que hace que el elemento aparezca presionado en el documento.
  • ridge: Similar a groove, pero invierte los valores de color de una manera que hace que el elemento parezca elevado.
  • inset: Agrega un tono dividido a la línea que hace que el elemento parezca ligeramente deprimido.
  • outset: Similar a inset, pero invierte los colores de una manera que hace que el elemento parezca ligeramente elevado.
• color: Especifica el color del borde y acepta ,, , , , , currentcolor and

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

You can count on excellent support for the border property across all browsers.

Cromo	Safari	Firefox	Ópera	ES DECIR	Androide	iOS
Alguna	Alguna	Alguna	3.5+	4+	Alguna	Alguna

Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.

• border-collapse: Specifies the spacing between borders on the
• border-image: Allows the use of an image to draw the border instead of a solid color.
• border-radius: Provides control for rounded corners.

More Information

• CSS Backgrounds and Borders Module Level 3 Specification
• Understanding border-image
• A Tale of Border Gradients

---




element. #####