Dalam teknik CSS (Cascading Style Sheet) sebenarnya ada banyak sekali property yang bisa kita gunakan. Tentunya kalian sudah tahu kan penggunaan CSS ini untuk apa? Jika belum tahu, coba baca-baca dulu artikel saya yang sebelumnya tentang Pengenalan Dasar CSS Template Blogger.

Pada tulisan kali ini saya akan berbagi satu teknik sederhana tentang bagaimana cara penggunaan property border-radius dalam bahasa CSS. Border radius ini biasa digunakan untuk membuat sudut dari suatu elemen HTML sehingga ujungnya berbentuk seperti lengkungan. Jadi, kalau suatu elemen pada dasarnya akan berbentuk kotak-kotak yang ujungnya berbentuk sudut 90 derajat. Dengan properti ini, kita bisa membuat sudut elemen tersebut jadi tumpul tidak 90 derajat lagi sudutnya.

Gimana menarik? ^_^
Kalau kalian tertarik kita akan mulai pelajarannya.

Kode CSS yang akan kita pakai sebagai berikut :

border-radius : [value1] ;
atau
border-radius : [value1] [value2] [value3] [value4] ;

Membuat Lengkungan Pada Tiap Sudut Elemen

Agar kalian bisa langsung paham, baiknya kita langsung coba praktek saja. Saya harap kalian juga langsung mencobanya di rumah. Jangan cuman dibaca aja nih tulisan. Kalau pun cuman mau ninggalin komentar doang di bawah tulisan ini, mending gak usah deh. Entar kalian malah gak dapat ilmunya, kan sayang. 😀

Silahkan buat kode HTML seperti berikut :

<HTML>
<head>
 <title>Belajar CSS - Border Radius</title>
 <style>
  .lengkung1, .lengkung2 {
   margin: 20px auto;
   padding: 20px;
   width: 150px;
   height: 100px;
   color: #fff;
   text-align: center;
   font: 17px Arial;
  }
  .lengkung1 {
   background: #e74c3c;
   border: 3px solid #c0392b;
   border-radius: 20px;
  }
  .lengkung2 {
   background: #2ecc71;
   border: 3px solid #27ae60;
   border-radius: 20px 60px 30px 100px;
  }
 </style>
</head>
<body>
 <div id='wrapper'>
  <div class='lengkung1'>
   <p>Contoh border radius pertama</p>
  </div>
  <div class='lengkung2'>
   <p>Contoh border radius kedua</p>
  </div>
 </div>
</body>
</HTML>

Kalian bisa gunakan aplikasi text editor seperti notepad++ untuk mengetik kode-kode diatas. Lalu simpan dalam format HTML dengan nama Belajar CSS – Border Radius.html

Kemudian, jalankan menggunakan browser favorit masing-masing. Disini saya masih setia menggunakan Google Chrome. Dan perhatikan gimana hasilnya. Sudah dilihat belum? 🙂

Jika sudah benar, maka hasilnya akan terlihat sama seperti di bawah ini :

Contoh border radius pertama
Contoh border radius kedua
*****

Penjelasan tentang Property Border Radius

Pada elemen yang pertama saya membuat warnanya menggunakan background: #e74c3c; atau yang hasilnya jadi warna merah. Elemen dengan class .lengkung1 tersebut juga saya pasang kode border-radius: 20px; maksudnya adalah pada semua sudut diberikan nilai radius atau jari-jari lengkungan sebesar 20px.

Pada elemen yang kedua saya kasih warna background: #2ecc71; atau yang jadinya warna hijau. Elemen dengan class .lengkung2 tersebut memiliki empat macam nilai border-radius yang masing-masing adalah sebesar 20px, 60px, 30px dan 100px. Penulisan keempat nilai tersebut dalam bahasa CSS tidak perlu pakai tanda koma.

.lengkung2 {
 border-radius: 20px 60px 30px 100px;
}

Kode CSS diatas kira-kira maksudnya adalah elemen lengkung2 diberikan radius sebesar 20px untuk pojok kiri atas, 60px untuk pojok kanan atas, 30px untuk pojok kanan bawah, dan 100px untuk pojok kiri bawah.

Dalam bahasa CSS, tiap property yang nilainya ada empat macam dibaca seperti arah putaran jarum jam. Mulai dari yang kiri ke kanan dan dari atas ke bawah. Ingat saja arah dari jam 12 ke jam 1 dan seterusnya. Jadi iyaa seperti itu. 😀

Sebenarnya kalian pun juga bisa memasukkan dua nilai atau tiga nilai dalam properti border radius ini. Bukan hanya satu atau empat saja yang boleh. Kalau mau silahkan dicoba-coba sendiri.

Gimana mudah kan?

*****

Membuat Elemen Lingkaran dengan CSS

Sekarang saya anggap kalian sudah paham dengan penggunaan property border radius dalam bahasa CSS. Biar lebih menarik saya mau memberikan satu macam contoh lagi untuk kalian pelajari. Teknik yang digunakan masih sama, yaitu memanfaatkan property border radius. Hanya saja kalau tadi sebelumnya kita memakain nilai dalam satuan piksel, di bawah ini kita akan coba memakai satuan persen.

Hasilnya iyaa sama saja sebenarnya. Sama-sama untuk menciptakan lengkungan pada tiap ujung elemen. Tapi disini kita jadi bisa membuat elemen lingkaran dengan mudah. Syaratnya cuman satu, elemen tersebut harus berbentuk persegi. Lebar dan tingginya harus sama. Kalau gak iyaa jadinya nanti gak persis lingkaran. ^_^

Tambahkan kode HTML berikut di bawah elemen lengkung2 :

  <div class='lengkung3'>
   <p>Contoh border radius ketiga</p>
  </div>

Dan jangan lupa pasang kode CSS berikut ke dalam <style> :

  .lengkung3 {
   background: #9b59b6;
   border: 3px solid #8e44ad;
   border-radius: 50%;
   height: 150px;
  }

Apa yang berbeda dengan elemen ketiga ini?
Apakah elemen yang muncul benar-benar berbentuk lingkaran?
Kalau iyaa, kenapa elemen lengkung3 bisa berbentuk lingkaran?

Kalau mau jawab pertanyaan saya di atas, silahkan tinggalkan lewat komentar di bawah tulisan ini yaa. Sekalian juga biar kita bisa saling sharing. Khususnya buat yang udah nyoba praktek latihan CSS border radius di atas.

Berikutnya kita akan lanjut ke materi yang juga menarik yaitu tentang Penggunaan CSS Property Box Shadow. Jadi bagi kalian yang gak mau ketinggalan seputar topik ini, silahkan subscribe blog chaidir.web.id. Dan dapatkan update terbaru langsung lewat inbox email kalian. ^_^

Selamat belajar!