Grens - CSS-trucs

De bordereigenschap is een verkorte syntaxis in CSS die meerdere waarden accepteert voor het tekenen van een lijn rond het element waarop het wordt toegepast.

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

Waarden

De bordereigenschap accepteert een of meer van de volgende waarden in combinatie:

border: || || 

• border-width: Specificeert de dikte van de rand.
  • : Een numerieke waarde gemeten px, em, rem, vhen vweenheden.
  • thin: Het equivalent van 1px
  • medium: Het equivalent van 3px
  • thick: Het equivalent van 5px
• border-style: Specificeert het type lijn dat rond het element wordt getrokken, inclusief:
  • solid: Een ononderbroken, doorlopende lijn.
  • none (standaard): er wordt geen lijn getekend.
  • hidden: Er is een lijn getekend, maar niet zichtbaar. dit kan handig zijn om wat extra breedte aan een element toe te voegen zonder een rand weer te geven.
  • dashed: Een lijn die uit streepjes bestaat.
  • dotted: Een lijn die uit punten bestaat.
  • double: Er worden twee lijnen rond het element getekend.
  • groove: Voegt een schuine rand toe op basis van de kleurwaarde op een manier waardoor het lijkt alsof het element in het document is gedrukt.
  • ridge: Gelijk aan groove, maar keert de kleurwaarden zodanig om dat het element verhoogd lijkt.
  • inset: Voegt een gesplitste toon toe aan de lijn waardoor het element een beetje depressief lijkt.
  • outset: Gelijk aan inset, maar keert de kleuren om zodat het element iets verhoogd lijkt.
• color: Specificeert de kleur van de rand en accepteert ,, , , , , 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	D.W.Z	Android	iOS
Ieder	Ieder	Ieder	3.5+	4+	Ieder	Ieder

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