Belajar CSS3 – border-radius dan border-image
CSS3 menyediakan dua properti border baru yaitu, border-image dan border-radius. Kedua properti terse
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
Properti | Kegunaanya |
---|---|
border-radius | Properti singkatan untuk mengatur semua sudut border yang membulat |
border-top-left-radius | Menentukan border bulat sudut atas kiri |
border-top-right-radius | Menentukan border bulat sudut atas kanan |
border-bottom-right-radius | Menentukan border bulat sudut bawah kanan |
border-bottom-left-radius | Menentukan border bulat sudut bawah kiri |
border-image | Properti singkatan untuk mengatur semua properti border-image- * |
border-image-source | Menentukan jalur ke gambar yang akan digunakan sebagai border |
border-image-slice | Menentukan cara mengiris gambar border |
border-image-width | Menentukan lebar gambar border |
border-image-outset | menentukan jumlah dimana area gambar perbatasan melampaui kotak perbatasan |
border-image-repeat | menentukan apakah gambar perbatasan harus diulang (repeated), dibulatkan (rounded) atau diregangkan (stretched) |