Граница - ЦСС-трикови

borderИмовина је скраћеница синтакса у ЦСС-у да прихвата више вредности за цртање линије око елемента се примењује у.

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

Вредности

borderИмовине прихвата један или више од следећих вредности у комбинацији:

border: || || 

• border-width: Одређује дебљину обруба.
  • : Нумеричка вредност мери у px, em, rem, vhи vwјединица.
  • thin: Еквивалент од 1px
  • medium: Еквивалент од 3px
  • thick: Еквивалент од 5px
• border-style: Одређује врсту линије повучене око елемента, укључујући:
  • solid: Пуна, непрекидна линија.
  • none (подразумевано): Није повучена линија.
  • hidden: Повучена је линија, али није видљива. ово може бити корисно за додавање мало додатне ширине елементу без приказивања обруба.
  • dashed: Линија која се састоји од цртица.
  • dotted: Линија која се састоји од тачака.
  • double: Око елемента су нацртане две линије.
  • groove: Додаје стопу на основу вредности боје на начин да чини да елемент изгледа утиснут у документ.
  • ridge: Слично groove, али преокреће вредности боја на начин да чини да елемент изгледа подигнут.
  • inset: Додаје раздвојени тон линији због које елемент изгледа помало депресивно.
  • outset: Слично inset, али преокреће боје на начин да елемент изгледа лагано подигнут.
• color: Одређује боју обруба и прихвата ,, , , , , 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.

Хром	Сафари	Фирефок	Опера	ИЕ	Андроид	иОС
Било који	Било који	Било који	3.5+	4+	Било који	Било који

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