Grænse - CSS-tricks

Den borderegenskab er en forkortelse syntaks i CSS, der accepterer flere værdier til at tegne en linje rundt om elementet den påføres.

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

Værdier

Den borderejendom accepterer en eller flere af følgende værdier i kombination:

border: || || 

• border-width: Angiver tykkelsen på grænsen.
  • : En numerisk værdi målt i px, em, rem, vhog vwenheder.
  • thin: Ækvivalent til 1px
  • medium: Ækvivalent til 3px
  • thick: Ækvivalent til 5px
• border-style: Angiver linjetypen, der er tegnet omkring elementet, inklusive:
  • solid: En solid, kontinuerlig linje.
  • none (standard): Der tegnes ingen linje.
  • hidden: En linje er tegnet, men ikke synlig. dette kan være praktisk til at tilføje lidt ekstra bredde til et element uden at vise en kant.
  • dashed: En linje, der består af bindestreger.
  • dotted: En linje, der består af prikker.
  • double: To linjer er trukket omkring elementet.
  • groove: Tilføjer en skråning baseret på farveværdien på en måde, der får elementet til at virke presset ind i dokumentet.
  • ridge: Svarende til groove, men vender farveværdierne på en måde, der får elementet til at virke hævet.
  • inset: Tilføjer en split tone til linjen, der får elementet til at se lidt deprimeret ud.
  • outset: Svarende til inset, men vender farverne på en måde, der får elementet til at fremstå let hævet.
• color: Angiver rammens farve og accepterer ,, , , , , 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	IE	Android	iOS
Nogen	Nogen	Nogen	3.5+	4+	Nogen	Nogen

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