Kode Praktis CSS3: Membuat Sudut Melengkung Pada Objek

| banghaji | 0 komentar | Tags: , , , , | Categories: CSS, Kode Praktis

Sebelumnya pernah dibahas tentang kode praktis CSS versi 3 tentang membuat bayangan dengan efek blur, baik pada teks maupun pada objek. Kali ini kita akan bahas kode praktis CSS tentang cara membuat sudut melengkung pada objek di halaman web.

border-radius

Secara umum kodenya adalah menggunakan property atau atribut bernama border-radius dengan format seperti berikut ini: border-radius: 10px. Efeknya akan berlaku untuk semua sudut. Jika ingin menentukan ukuran sudut yang berbeda-beda, maka penulisannya adalah border-radius: 5px 10px 15px 20px; dengan urutan atas, kanan, bawah, dan kiri.

Untuk pengaturan hanya pada sudut tertentu, bisa menggunakan salah satu atau beberapa atribut berikut:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

Agar lebih paham, silahkan coba ketik dan jalankan kode di bawah ini.

<!DOCTYPE html>
<html>
<head>
   <title>Border Radius</title>
   <style>
.kotak {
  color: #2288ee;
  padding: 10px;
  margin: 15px;
    box-shadow: 0px 0px 10px #000000;
}
.seperempat {
  width: 26%;
  float: left;
}
.bulat {
  border-radius: 20px;
}
.atas-kiri {
  border-top-left-radius: 20px;
}
.atas-kanan {
  border-top-right-radius: 20px;
}
.bawah-kiri {
  border-bottom-left-radius: 20px;
}
.bawah-kanan {
  border-bottom-right-radius: 20px;
}
   </style>
</head>
<body>
   <div class="kotak bulat">
      Teks ini berada dalam kotak dengan semua sudutnya melengkung, menggunakan <b>border-radius</b>
   </div>

   <div class="kotak seperempat atas-kiri">
      <b>border-top-left-radius</b>
   </div>
   <div class="kotak seperempat atas-kanan">
      <b>border-top-right-radius</b>
   </div>
   <div class="kotak seperempat bawah-kiri">
      <b>border-bottom-left-radius</b>
   </div>
   <div class="kotak seperempat bawah-kanan">
      <b>border-bottom-right-radius</b>
   </div>
   <div class="kotak seperempat atas-kiri bawah-kanan">
      <b>border-top-left-radius</b> dan <b>border-bottom-right-radius</b>
   </div>
   <div class="kotak seperempat atas-kanan bawah-kiri">
      <b>border-top-right-radius</b> dan <b>border-bottom-left-radius</b>
   </div>
   <div class="kotak seperempat atas-kiri bawah-kiri">
      <b>border-top-left-radius</b> dan <b>border-bottom-left-radius</b>
   </div>
   <div class="kotak seperempat atas-kanan bawah-kanan">
      <b>border-top-right-radius</b> dan <b>border-bottom-right-radius</b> 
   </div>
   <div class="kotak seperempat atas-kiri atas-kanan">
      <b>border-top-left-radius</b> dan <b>border-top-right-radius</b>
   </div>
   <div class="kotak seperempat bawah-kiri bawah-kanan">
      <b>border-bottom-left-radius</b> dan <b>border-bottom-right-radius</b>
   </div>
</body>
</html>

Hasilnya kira-kira seperti gambar di bawah ini.

Border Radius CSS3

Sampai jumpa pada kode praktis berikutnya.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *