Piir - CSS-trikid

borderVara on lühem süntaks CSS, mis aktsepteerib mitme väärtuse joone ümber element on rakendatud.

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

Väärtused

borderVara vastu ühe või mitu järgmistest väärtustest kombinatsioonis:

border: || || 

• border-width: Määrab ääre paksuse.
  • : Arvuline väärtus mõõdetakse px, em, rem, vhja vwühikut.
  • thin: Samaväärne väärtusega 1px
  • medium: Samaväärne väärtusega 3px
  • thick: Samaväärne väärtusega 5px
• border-style: Määrab elemendi ümber tõmmatud joone tüübi, sealhulgas:
  • solid: Kindel, pidev joon.
  • none (vaikimisi): ühtegi joont ei tõmmata.
  • hidden: Joon on tõmmatud, kuid pole nähtav. see võib olla mugav, kui lisada elemendile veidi lisalaiust ilma ääristust näitamata.
  • dashed: Joon, mis koosneb kriipsudest.
  • dotted: Joon, mis koosneb punktidest.
  • double: Elemendi ümber tõmmatakse kaks joont.
  • groove: Lisab värviväärtuse põhjal kaldu viisil, mis muudab elemendi dokumendiks pressituna.
  • ridge: Sarnane groove, kuid muudab värviväärtused ümber, nii et element näib olevat tõstetud.
  • inset: Lisab joonele jagatud tooni, mis muudab elemendi veidi masendunuks.
  • outset: Sarnane insetvärviga, kuid muudab värvid vastupidiseks, nii et element näib kergelt kõrgendatud olevat.
• color: Määrab ääre värvi ja aktsepteerib ,, , , , , 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	Ooper	IE	Android	iOS
Ükskõik	Ükskõik	Ükskõik	3,5+	4+	Ükskõik	Ükskõik

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