Belajar CSS3 – border-radius dan border-image

Border pada CSS3

Pada CSS3 terdapat dua fitur baru yaitu properti border-image dan border-radius. border-image digunakan untuk membuat gambar border custom, dan border-radius digunakan untuk memberikan gaya border yang bulat. Terkait seputar border yang lainnya, Anda bisa baca kembali CSS dasar seputar border.

Border-radius

Dengan properti border-radius Anda bisa menggunakannya untuk membuat border atau perbatasan yang bulat. Agar Anda bisa melihat effek visual border-radius, sangat disarankan agar memberikan background-color atau border pada elemennya, ini tidak wajib, ini supaya Anda bisa melihat effek perbatasan yang bulat.

p {
    border: 3px solid green;
}
#p1 {
    border-radius: 5px 10px 15px 20px;
}
#p2 {
    border-radius: 5px 15px 20px;
}
#p3 {
    border-radius: 5px 20px;
}
#p4 {
    border-radius: 5px;
}

Jadi, inilah cara kerjanya:

Jika properti border-radius memiliki empat nilai:

• border-radius: 5px 10px 15px 20px;
  • border-radius atas 5px
  • border-radius kanan 10px
  • border-radius bawah 15px
  • border-radius kiri 20px

Jika properti border-radius memiliki tiga nilai:

• border-radius: 5px 15px 20px;
  • border-radius atas 5px
  • border-radius kanan dan kiri 15px
  • border-radius bawah 20px

Jika properti border-radius memiliki dua nilai:

• border-radius: 5px 20px;
  • border-radius atas dan bawah 5px
  • border-radius kanan dan kiri 20px

Jika properti border-radius memiliki satu nilai:

• border-radius: 5px
  • keempat sudut border-radius 5px

Border-radius individu

Anda bisa mengatur border radius lebih spesifik atau mendetail dengan menggunakan istilah border individu. Yang dimaksud dengan border individu sendiri, Anda bisa mengatur menentukan setiap sudut untuk memberikan border atau perbatasan. Berikut list properti border radius individu:

• border-top-left-radius ( atas – kiri )
• border-top-right-radius ( atas – kanan )
• border-bottom-right-radius ( bawah – kanan )
• border-bottom-left-radius ( bawah kiri )

p {
    background-color: orange;
    padding: 12px;
}
#p1 {
    border-top-left-radius: 10px;
}
#p2 {
    border-top-right-radius: 15px;
}
#p3 {
    border-bottom-right-radius: 20px;
}
#p4 {
    border-bottom-left-radius: 25px;
}

Border-image-source

Dengan properti border-image-source Anda bisa menggunakannya untuk menentukan jalur gambar yang akan digunakan sebagai perbatasan.

#source {
    border: 10px solid transparent;
    border-image-source: url(https://hendky.com/editor/gambar/border-gambar.png);
}

Border-image-slice

Dengan properti border-image-slice Anda bisa menggunakannya untuk menentukan cara mengiris gambar border atau perbatasan.

#border-img1 {
    border-image-slice: 20%;
}
#border-img2 {
    border-image-slice: 30%;
}
#border-img3 {
    border-image-slice: 40%;
}

Border-image-width

Dengan properti border-image-width Anda bisa menggunakannya untuk menentukan lebar gambar border atau perbatasan.

#border-img1 {
    border-image-width: 5px;
}
#border-img2 {
    border-image-width: 10px;
}
#border-img3 {
    border-image-width: 20px;
}

Border-image-outset

Dengan properti border-image-outset Anda bisa menggunakannya untuk menentukan jumlah dimana area gambar perbatasan melampaui kotak perbatasan.

#outset {
    border-image-outset: 10px;
}

Border-image-repeat

Dengan properti border-image-repeat Anda bisa menggunakannya untuk menentukan apakah gambar perbatasan harus diulang (repeat), dibulatkan (round) atau diregangkan (stretch).

#repeat {
    border-image-repeat: repeat;
}
#round {
    border-image-repeat: round;
}
#stretch {
    border-image-repeat: stretch;
}

Border image shorthand

Dengan border image shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti border-image-* dalam satu properti tunggal. Untuk menggunakan border image shorthand Anda cukup menggunakan properti border-image. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti contoh-contoh diatas.

Properti border-image shorthand berlaku untuk border-image dibawah ini:

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

#shorthand {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(https://hendky.com/editor/gambar/border-gambar.png) 20% / 10px / 20px stretch;
}

Daftar properti border