Tujuan dari manual ini adalah untuk menjelaskan cara membuat batas sudut bulat. Untuk itu, pertama-tama kita harus mengetahui tentang “ berbatasan ' Properti. Jadi, mari kita mulai!
Apa itu Properti 'perbatasan' di CSS?
Untuk membuat batas di sekitar elemen, Anda perlu menggunakan ' berbatasan ' Properti. Dengan menggunakan properti ini, Anda dapat mengatur “ gaya ”, “ warna ', dan ' lebar ” dari perbatasan.
Sintaksis
Sintaks properti perbatasan diberikan sebagai:
berbatasan : warna gaya lebar
Berikut adalah deskripsi dari nilai-nilai yang diberikan di atas:
- lebar: Digunakan untuk mengatur lebar border.
- gaya: Ini digunakan untuk mengatur gaya batas, seperti putus-putus, putus-putus, padat, atau ganda.
- warna: Ini menentukan warna perbatasan.
Berikut adalah contoh di mana kami menerapkan ' berbatasan ' Properti.
Bagaimana Membuat Perbatasan Menggunakan CSS?
Untuk membuat perbatasan, pertama, tambahkan elemen dalam file HTML. Untuk melakukannya, kita akan membuat
dan
:
< tubuh >
< div kelas = 'sudut' >
< h1 > petunjuk Linux < / h1 >
< p > Sudut bundar di CSS < / p >
< / div >
< / tubuh >
Selanjutnya, kita akan pindah ke bagian CSS.
Di sini, “ .sudut ” digunakan untuk mengakses kelas yang ditetapkan ke
.sudut {
berbatasan : 4px padat rgb ( 248 , 6 , 107 ) ;
lebar : 250px ;
tinggi : 150px ;
warna latar belakang : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Setelah Anda menerapkan kode yang disebutkan di atas, buka file HTML dan jalankan. Anda akan melihat hasil berikut:
Sekarang, kita akan pindah ke bagian selanjutnya, di mana kita akan membuat perbatasan persegi ke perbatasan sudut bulat.
Bagaimana Membulatkan Sudut Menggunakan CSS?
Untuk membuat batas sudut bulat, tombol “ radius batas ” properti sedang digunakan, di mana Anda dapat mengatur radius sudut sesuai dengan preferensi Anda.
Sintaksis
Sintaks properti border-radius diberikan di bawah ini:
radius batas : nilaiMari kita lanjutkan contoh sebelumnya dan atur radius batas untuk mencapai sudut bulat.
Contoh
Di ' .sudut ” kelas file CSS, atur nilai “ radius batas ” properti sebagai “ 30px ”:
radius batas : 30px ;Dengan menambahkan baris di atas, Anda akan mendapatkan output berikut:
Output yang diberikan di atas menandakan bahwa perbatasan berhasil diubah menjadi sudut bulat karena properti radius perbatasan.
Kesimpulan
Di CSS' radius batas ” properti digunakan untuk mengubah sudut perbatasan. Bentuk kurva berubah sesuai dengan nilai jari-jari yang diberikan. Menggunakan properti yang disebutkan, Anda dapat mengatur radius sudut sesuai pilihan Anda. Pada artikel ini, kami telah menjelaskan cara membulatkan batas sudut menggunakan properti radius batas dengan bantuan sebuah contoh.