Apa dan Bagimana Cara Penggunaan Border Radius?

Perhatikan gambar berikut.

Atau seperti gambar berikut.

Nah lengkungan di setiap sudut elemen pada gambar diatas tidak didesain khusus menggunakan aplikasi edit gambar tertentu. Namun dibuat menggunakan properti “Border Radius”.

Apa Itu Border Radius?

Border Radius merupakan properti untuk membuat suatu element memiliki tepian yang elips atau umumnya disebut sudut lengkungan.

Dengan adanya properti border radius, kamu bisa berkreasi dengan menambahkan lengkungan-lengkungan halus di setiap sudut border, hingga memungkinkan kamu untuk membuat sebuah lingkaran.

Biasanya, ada 4 jenis border radius yang bisa kamu gunakan.

• Border radius bagian kiri atas.
• Border radius pada bagian kanan atas.
• Border radius kiri bawah.
• Dan border radius kanan bawah.

Berikut syntax yang digunakan untuk membuat border radius:

border-radius: 30px;

Contoh Penggunaan Border Radius

Untuk menggunakan border radius, kamu bisa melihat contoh dibawah ini.

Contoh 1

Berikut contoh penggunaan border radius pada setiap sudut element yang memiliki ukuran radius yang sama.

Syntax:

Result:

Contoh 2

Border radius untuk menetapkan nilai pertama sebagai sudut kiri atas dan kanan bawa, serta nilai kedua sebagai sudut kanan atas dan kiri bawah.

Syntax:

Result:

Contoh 3

Border radius untuk mengatur nilai pertama untuk sudut kiri atas, nilai kedua untuk sudut kanan atas dan kiri bawag, serta nilai ketiga untuk sudut kanan bawah.

Syntax:

Result:

Contoh 4

Border radius untuk mengatur nilai radius pertama, kedua, ketiga, dan keempat untuk masing-masing sudut kiri atas, kanan atas, kanan bawah, dan kiri bawah.

Syntax:

Result:

Contoh 5

Border radius untuk mengatur nilai bagian kiri atas.

Sintax:

Result:

Contoh 6

Border radius untuk mengatur nilai bagian kanan atas.

Sintax:

Result:

Contoh 7

Border radius untuk mengatur nilai bagian kiri bawah.

Syntax:

Result:

Contoh 8

Border radius untuk mengatur nilai bagian kanan bawah.

Syntax:

Result:

Contoh 9

Border radius untuk mengatur semua sudut (kiri atas, kanan atas, kiri bawah, dan kanan bawah) dengan nilai tertentu.

Syntax:

Result:

Nah itulah 9 contoh penggunaan border radius untuk sebuah elemen, sekarang giliran kamu mengatur berbagai border radius sesuai dengan  kebutuhan kamu. Jangan lupa tulis pengalaman kamu di kolom komentar dibawah ya. 

Semoga bermanfaat dan selamat mencoba.