Robeža - CSS-triki

borderĪpašums ir saīsinājums sintakse CSS, kas pieņem vairākas vērtības zīmēšanas līniju ap elementa tas ir piemērots.

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

Vērtības

borderĪpašums pieņem vienu vai vairākas no šīm vērtībām kombinācijā:

border: || || 

• border-width: Norāda apmales biezumu.
  • : Skaitliska vērtība, mērīta px, em, rem, vhun vwvienībām.
  • thin: Ekvivalents 1px
  • medium: Ekvivalents 3px
  • thick: Ekvivalents 5px
• border-style: Norāda līnijas veidu, kas novilkta ap elementu, ieskaitot:
  • solid: Cieta, nepārtraukta līnija.
  • none (noklusējums): neviena līnija nav novilkta.
  • hidden: Līnija ir novilkta, bet nav redzama. tas var būt noderīgi, lai elementam pievienotu nedaudz papildu platumu, nerādot apmali.
  • dashed: Līnija, kas sastāv no domuzīmēm.
  • dotted: Līnija, kas sastāv no punktiem.
  • double: Ap elementu ir novilktas divas līnijas.
  • groove: Pievieno slīpumu, pamatojoties uz krāsu vērtību tādā veidā, ka elements dokumentā šķiet iespiests.
  • ridge: Līdzīgi kā groove, bet apvērš krāsu vērtības tādā veidā, ka elements šķiet pacelts.
  • inset: Pievieno līnijai dalītu signālu, kas padara elementu nedaudz nomāktu.
  • outset: Līdzīgi kā inset, bet apgriež krāsas tādā veidā, ka elements šķiet nedaudz pacelts.
• color: Norāda apmales krāsu un pieņem ,, , , , , 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
Jebkurš	Jebkurš	Jebkurš	3,5+	4+	Jebkurš	Jebkurš

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