Grense - CSS-triks

Den borderegenskapen er en forkortelse syntaks i CSS som kan brukes flere verdier for å trekke en linje omkring elementet den påføres.

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

Verdier

Den bordereiendommen aksepterer ett eller flere av følgende verdier i kombinasjon:

border: || || 

• border-width: Spesifiserer tykkelsen på grensen.
  • En numerisk verdi målt i px, em, rem, vhog vwenheter.
  • thin: Tilsvarende av 1px
  • medium: Tilsvarende av 3px
  • thick: Tilsvarende av 5px
• border-style: Spesifiserer linjetypen som er tegnet rundt elementet, inkludert:
  • solid: En solid, kontinuerlig linje.
  • none (standard): Ingen tegn er tegnet.
  • hidden: En linje er tegnet, men ikke synlig. Dette kan være nyttig for å legge til litt ekstra bredde til et element uten å vise en kant.
  • dashed: En linje som består av bindestreker.
  • dotted: En linje som består av prikker.
  • double: To linjer er tegnet rundt elementet.
  • groove: Legger til en fasing basert på fargeverdien på en måte som gjør at elementet virker presset inn i dokumentet.
  • ridge: Ligner på groove, men reverserer fargeverdiene på en måte som får elementet til å virke hevet.
  • inset: Legger til en delt tone på linjen som får elementet til å virke litt deprimert.
  • outset: Ligner på inset, men reverserer fargene på en måte som gjør at elementet virker litt hevet.
• color: Spesifiserer fargen på kanten og godtar ,, , , , , 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.

Chrome	Safari	Firefox	Opera	DVS	Android	iOS
Noen	Noen	Noen	3.5+	4+	Noen	Noen

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. #####