Sempadan-jejari - Trik CSS | CSS Almanac 2025

Anda boleh memberikan elemen "sudut bulat" dengan menerapkan border-radiusCSS melalui. Anda hanya akan melihat sekiranya terdapat perubahan warna. Contohnya, jika elemen tersebut memiliki warna latar atau sempadan yang berbeza daripada elemen itu sudah berakhir. Contoh mudah:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Ini sebenarnya tidak perlu lagi, tetapi untuk sokongan penyemak imbas yang terbaik, anda boleh awalan 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 sifat tersebut: awalan vendor disenaraikan terlebih dahulu dan versi "spesifikasi" bukan awalan disenaraikan terakhir. Ini adalah kaedah yang betul untuk melakukannya. Jejari sempadan adalah contoh yang sangat baik mengapa kita melakukannya dengan cara itu. Dalam versi penggunaan yang lebih rumit border-radius(di mana anda melewati dua nilai dan bukan satu) -webkit-awalan vendor yang lebih tua akan melakukan sesuatu yang sama sekali berbeza daripada versi "spesifikasi". Oleh itu, jika kita membabi buta menyalin / menampal nilai yang sama ke ketiga-tiga sifat, kita dapat melihat hasil yang berbeza dari penyemak imbas. Ketahui lebih lanjut mengenai senario ini. Untuk jangka masa panjang yang paling konsisten, sebaiknya senaraikan versi "spesifikasi" yang terakhir.

Cukup realistik hari ini untuk menjatuhkan awalan dan hanya menggunakan jejari sempadan, seperti yang dibincangkan di sini.

Sekiranya elemen mempunyai latar belakang gambar, elemen tersebut akan dipotong pada sudut bulat secara semula jadi:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Kadang-kadang anda dapat melihat background-color"kebocoran" di luar sempadan ketika border-radiusada. (lihat). Untuk mengelakkannya, anda menggunakan klip latar:

.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 pada keempat sudut elemen. Tetapi perkara itu tidak perlu berlaku. Anda boleh menentukan setiap sudut secara terpisah jika anda mahu:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Anda juga boleh menentukan dua atau tiga nilai. MDN menerangkannya dengan baik:

Sekiranya satu nilai ditetapkan, jejari ini berlaku untuk semua 4 penjuru .
Sekiranya dua nilai ditetapkan, yang pertama berlaku untuk top-leftdan bottom-rightsudut, yang kedua berlaku untuk top-rightdan bottom-leftsudut.
Empat nilai memohon kepada top-left, top-right, bottom-right, bottom-leftsudut dalam perintah itu.
Tiga nilai: Nilai kedua berlaku top-rightdan juga bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Anda juga boleh menentukan jejari di mana sudut dibundarkan. Dengan kata lain, pembundaran tidak harus bulat sempurna, boleh berbentuk elips. Ini dilakukan dengan menggunakan garis miring (“/”) 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 menyokong sempadan elips pada penyemak imbas WebKit 3.5+ dan yang lebih lama (mis. Safari 4) dengan tidak betul memperlakukan "40px 10px" sama dengan "40px / 10px".

Anda boleh menentukan nilai border-radiusdalam peratusan. Ini sangat berguna ketika ingin membuat bentuk bulatan atau elipse, tetapi dapat digunakan bila-bila masa anda mahu radius sempadan berkorelasi langsung dengan lebar elemen.

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Catatan: Dalam nilai peratusan Safari untuk radius sempadan hanya disokong pada 5.1+. Di Opera, hanya disokong pada 11.5+.

Inilah setiap harta 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 dapat memiliki nilai yang dipisahkan ruang juga, seperti "5px 10px", yang berperilaku seperti nilai yang dipisahkan garis miring dalam jarak pendek (radius mendatar (ruang) radius menegak).

Sumber

Alat pantas untuk menghasilkan kod jejari sempadan
Dokumen Mozilla
Mencari jejari yang sempurna
Adakah kita perlu awalan radius sempadan lagi?

Berikut adalah sedikit perkara untuk dimainkan dengan sifat dan nilai yang berbeza:

Lihat Pen All the border-radius 'oleh Chris Coyier (@chriscoyier) di CodePen.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.