Perbatasan - Trik CSS

The borderproperti adalah sintaks singkatan dalam CSS yang menerima beberapa nilai untuk menggambar garis di sekitar elemen itu diterapkan untuk.

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

Nilai

The borderproperti menerima satu atau lebih dari nilai berikut dalam kombinasi:

border: || || 

• border-width: Menentukan ketebalan perbatasan.
  • : Sebuah nilai numerik diukur dalam px, em, rem, vhdan vwunit.
  • thin: Setara dengan 1px
  • medium: Setara dengan 3px
  • thick: Setara dengan 5px
• border-style: Menentukan jenis garis yang digambar di sekitar elemen, termasuk:
  • solid: Garis yang solid dan kontinu.
  • none (default): Tidak ada garis yang ditarik.
  • hidden: Garis ditarik, tapi tidak terlihat. ini bisa berguna untuk menambahkan sedikit lebar ekstra ke elemen tanpa menampilkan batas.
  • dashed: Garis yang terdiri dari tanda hubung.
  • dotted: Garis yang terdiri dari titik-titik.
  • double: Dua garis digambar di sekitar elemen.
  • groove: Menambahkan bevel berdasarkan nilai warna dengan cara yang membuat elemen tampak ditekan ke dalam dokumen.
  • ridge: Mirip dengan groove, tetapi membalikkan nilai warna sedemikian rupa sehingga elemen tampak terangkat.
  • inset: Menambahkan nada terpisah ke garis yang membuat elemen tampak sedikit tertekan.
  • outset: Mirip dengan inset, tetapi membalikkan warna dengan cara yang membuat elemen tampak sedikit terangkat.
• color: Menentukan warna perbatasan dan menerima ,, , , , , 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	YAITU	Android	iOS
Apa saja	Apa saja	Apa saja	3.5+	4+	Apa saja	Apa saja

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