Gräns - CSS-tricks

Den borderegenskapen är en förkortning syntax i CSS som accepterar flera värden för att dra en linje runt elementet den tillämpas på.

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

Värden

Den borderfastighet accepterar ett eller flera av följande värden i kombination:

border: || || 

• border-width: Anger gränsens tjocklek.
  • : Ett numeriskt värde som uppmätts i px, em, rem, vhoch vwenheter.
  • thin: Motsvarande av 1px
  • medium: Motsvarande av 3px
  • thick: Motsvarande av 5px
• border-style: Anger vilken typ av linje som dras runt elementet, inklusive:
  • solid: En solid, kontinuerlig linje.
  • none (standard): Ingen linje dras.
  • hidden: En linje är ritad men inte synlig. detta kan vara praktiskt för att lägga till lite extra bredd till ett element utan att visa en kant.
  • dashed: En linje som består av bindestreck.
  • dotted: En linje som består av prickar.
  • double: Två linjer dras runt elementet.
  • groove: Lägger till en avfasning baserat på färgvärdet på ett sätt som gör att elementet verkar pressat in i dokumentet.
  • ridge: Liknar groove, men vänder färgvärdena på ett sätt som gör att elementet verkar upphöjt.
  • inset: Lägger till en delad ton till linjen som gör att elementet verkar lite deprimerat.
  • outset: Liknar inset, men vänder färgerna på ett sätt som gör att elementet verkar något upphöjt.
• color: Anger färg på gränsen och accepterar ,, , , , , 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.

Krom	Safari	Firefox	Opera	IE	Android	iOS
Några	Några	Några	3,5+	4+	Några	Några

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