Anda dapat memberikan elemen "sudut membulat" dengan menerapkan border-radiusCSS melalui. Anda hanya akan melihat jika ada perubahan warna yang terlibat. Misalnya, jika elemen memiliki warna latar belakang atau batas yang berbeda dari elemen yang dilewati. Contoh sederhana:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )Ini benar-benar tidak perlu lagi, tetapi untuk dukungan browser terbaik yang mungkin, Anda dapat mengawali dengan -webkit-dan -moz-:
.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )Perhatikan urutan properti tersebut: prefiks vendor dicantumkan terlebih dahulu dan versi "spec" yang tidak diawali dicantumkan terakhir. Ini adalah cara yang benar untuk melakukannya. Jari-jari perbatasan adalah contoh yang sangat bagus mengapa kami melakukannya seperti itu. Dalam versi penggunaan yang sedikit lebih rumit border-radius(di mana Anda meneruskan dua nilai alih-alih satu) -webkit-awalan vendor yang lebih lama akan melakukan sesuatu yang sama sekali berbeda dari versi "spesifikasi". Jadi jika kita secara membabi buta menyalin / menempelkan nilai yang sama ke ketiga properti, kita bisa melihat hasil yang berbeda lintas browser. Pelajari lebih lanjut tentang skenario ini. Untuk konsistensi jangka panjang, yang terbaik adalah mencantumkan versi "spesifikasi" terakhir.
Cukup realistis akhir-akhir ini untuk melepaskan prefiks dan hanya menggunakan radius-batas, seperti yang dibahas di sini.
Jika elemen memiliki latar belakang gambar, itu akan dipotong di sudut bulat secara alami:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )Terkadang Anda dapat melihat background-color"kebocoran" di luar perbatasan saat border-radiusada. (Lihat). Untuk mencegah ini, Anda menggunakan klip latar belakang:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )Dengan hanya satu nilai, border-radiusakan sama di keempat sudut elemen. Tapi itu tidak perlu menjadi masalah. Anda dapat menentukan setiap sudut secara terpisah jika Anda ingin:
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )Anda juga dapat menentukan dua atau tiga nilai. MDN menjelaskannya dengan baik:
Jika satu nilai ditetapkan, radius ini berlaku untuk keempat sudut .
Jika dua nilai ditetapkan, yang pertama berlaku untuk top-leftdan bottom-rightsudut, yang kedua berlaku untuk top-rightdan bottom-leftsudut.
Empat nilai-nilai berlaku untuk top-left, top-right, bottom-right, bottom-leftsudut dalam urutan itu.
Tiga nilai: Nilai kedua berlaku untuk top-rightdan juga bottom-left.
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )Anda juga dapat menentukan jari-jari di mana sudut dibulatkan. Dengan kata lain, pembulatan tidak harus berbentuk lingkaran sempurna, bisa juga berbentuk elips. Ini dilakukan dengan menggunakan garis miring ("/") di antara dua nilai.
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )Catatan: Firefox hanya mendukung batas elips di 3.5+ dan browser WebKit lama (misalnya Safari 4) salah memperlakukan "40px 10px" sebagai sama dengan "40px / 10px".
Anda dapat menentukan nilai border-radiusdalam persentase. Ini sangat berguna saat ingin membuat lingkaran atau bentuk elips, tetapi dapat digunakan kapan saja Anda ingin radius batas dikorelasikan secara langsung dengan lebar elemen.
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )Catatan: Di Safari, nilai persentase untuk radius batas hanya didukung di 5.1+. Di Opera, hanya didukung di 11.5+.
Berikut setiap properti individu, dengan awalan vendor:
.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )Catatan: Setiap nilai tersebut juga dapat memiliki nilai yang dipisahkan spasi, seperti "5px 10px", yang berperilaku seperti nilai yang dipisahkan garis miring dalam singkatan (radius horizontal (spasi) radius vertikal).
Sumber daya
- Alat cepat untuk menghasilkan kode radius perbatasan
- Mozilla Docs
- Mencari radius yang sempurna
- Apakah kita perlu mengawali radius-perbatasan lagi?
Berikut hal kecil untuk dimainkan dengan properti dan nilai yang berbeda:
Lihat Pena All the border-radius 'oleh Chris Coyier (@chriscoyier) di CodePen.
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 4 * | 3 * | 9 | 12 | 3.1 * |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 * | 3.2 * |