Sınır - CSS Hileleri

borderÖzelliği, uygulandığı elemanı etrafında bir çizgi için birden fazla değer kabul CSS bir kestirme sözdizimi.

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

Değerler

borderÖzelliği kombinasyon halinde aşağıdaki değerlerden biri ya da daha çok kabul eder:

border: || || 

• border-width: Kenarlığın kalınlığını belirtir.
  • : Ölçülen bir sayısal değer px, em, rem, vhve vwbirimler.
  • thin: Eşdeğeri 1px
  • medium: Eşdeğeri 3px
  • thick: Eşdeğeri 5px
• border-style: Öğenin etrafına çizilen çizginin türünü belirtir:
  • solid: Kesintisiz, kesintisiz bir çizgi.
  • none (varsayılan): Hiçbir çizgi çizilmez.
  • hidden: Bir çizgi çizilir, ancak görünmez. bu, bir sınır görüntülemeden bir öğeye biraz fazladan genişlik eklemek için kullanışlı olabilir.
  • dashed: Kısa çizgilerden oluşan bir çizgi.
  • dotted: Noktalardan oluşan bir çizgi.
  • double: Elemanın etrafına iki çizgi çizilir.
  • groove: Renk değerine bağlı olarak, öğenin belgeye bastırılmış gibi görünmesini sağlayacak şekilde bir eğim ekler.
  • ridge: Benzer groove, ancak renk değerlerini, öğenin yükseltilmiş görünmesini sağlayacak şekilde ters çevirir.
  • inset: Öğenin hafifçe bastırılmış görünmesini sağlayan çizgiye bölünmüş bir ton ekler.
  • outset: Benzer inset, ancak öğeleri hafifçe yükseltilmiş gibi görünecek şekilde renkleri tersine çevirir.
• color: Kenarlığın rengini belirtir ve kabul eder ,, , , , , 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
Hiç	Hiç	Hiç	3.5+	4+	Hiç	Hiç

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