Hranica - Triky CSS

Táto bordervlastnosť je skratková syntax v CSS, ktorá akceptuje viac hodnôt na nakreslenie čiary okolo prvku, na ktorý sa vzťahuje.

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

Hodnoty

Toto borderubytovacie zariadenie akceptuje kombináciu jednej alebo viacerých nasledujúcich hodnôt:

border: || || 

• border-width: Určuje hrúbku orámovania.
  • : Číselná hodnota nameraná v px, em, rem, vha vwjednotiek.
  • thin: Ekvivalent 1px
  • medium: Ekvivalent 3px
  • thick: Ekvivalent 5px
• border-style: Určuje typ čiary nakreslenej okolo prvku, vrátane:
  • solid: Plná, súvislá čiara.
  • none (predvolené): Nie je nakreslená žiadna čiara.
  • hidden: Čiara je nakreslená, ale nie je viditeľná. to môže byť užitočné pri pridávaní trochu väčšej šírky prvku bez zobrazenia orámovania.
  • dashed: Riadok, ktorý sa skladá z pomlčiek.
  • dotted: Čiara, ktorá sa skladá z bodiek.
  • double: Okolo prvku sú nakreslené dve čiary.
  • groove: Pridá skosenie na základe hodnoty farby tak, aby sa prvok javil ako vtlačený do dokumentu.
  • ridge: Podobné ako groove, ale obráti hodnoty farieb tak, aby sa prvok javil ako vyvýšený.
  • inset: Pridá deliaci tón do čiary, vďaka ktorej bude prvok pôsobiť mierne depresívne.
  • outset: Podobné ako inset, ale obráti farby tak, aby sa prvok javil mierne vyvýšený.
• color: Určuje farbu orámovania a akceptuje ,, , , , , 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
akýkoľvek	akýkoľvek	akýkoľvek	3,5+	4+	akýkoľvek	akýkoľvek

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