CSS Rounded Borders: Bikin Tampilan Lebih Lembut (Tutorial CSS Part 20)

Gambar 20.0 : Logo CSS

Kalau kamu pernah lihat elemen website dengan sudut-sudut yang halus dan membulat—nah, itu kerjaannya si CSS rounded borders. Dibandingkan kotak kaku yang tajam di setiap ujungnya, sudut membulat bisa bikin tampilan lebih modern dan friendly. Yuk, kita bahas gimana caranya!

Apa Itu CSS Rounded Borders?

Rounded borders di CSS bisa dibuat dengan properti border-radius. Properti ini memungkinkan kita untuk mengatur seberapa membulat sudut dari sebuah elemen HTML.

div {
  border: 2px solid #3498db;
  border-radius: 10px;
}

Hasilnya? Sebuah kotak biru dengan sudut melengkung 10 piksel. Makin besar nilai border-radius-nya, makin bulat sudutnya. Bahkan kamu bisa bikin elemen jadi lingkaran sempurna!

.lingkaran {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%;
}

Tips: Supaya bentuknya benar-benar bulat, pastikan width dan height sama besar, lalu atur border-radius: 50%.

Contoh Internal CSS

Biar makin kebayang, yuk lihat contoh kode HTML dengan internal CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Border Radius</title>
  <style>
    .kotak {
      width: 200px;
      height: 100px;
      background-color: #3498db;
      color: white;
      text-align: center;
      line-height: 100px;
      border-radius: 20px;
    }

    .lingkaran {
      width: 100px;
      height: 100px;
      background-color: #e74c3c;
      border-radius: 50%;
      margin-top: 20px;
    }

    .tombol {
      padding: 10px 20px;
      background-color: #2ecc71;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .tombol:hover {
      background-color: #27ae60;
    }
  </style>
</head>
<body>

  <div class="kotak">Kotak Bulat</div>
  <div class="lingkaran"></div>
  <br>
  <button class="tombol">Klik Saya</button>

</body>
</html>

Hasilnya:

Gambar 20.1 : Contoh border-radius

Di atas, kita bikin tiga elemen:

Sebuah kotak dengan sudut membulat
Sebuah lingkaran penuh
Sebuah tombol dengan efek hover

Tabel Lengkap Properti CSS Border

Supaya kamu makin jago styling, berikut ini adalah daftar lengkap properti CSS yang berhubungan dengan border. Tabel ini bisa kamu jadikan referensi pas ngoding.

Properti CSS	Fungsi
`border`	Shorthand untuk atur seluruh sisi border (style, width, color)
`border-width`	Mengatur ketebalan border
`border-style`	Menentukan jenis garis (solid, dashed, dotted, dll.)
`border-color`	Memberi warna pada border
`border-top`	Atur border sisi atas
`border-right`	Atur border sisi kanan
`border-bottom`	Atur border sisi bawah
`border-left`	Atur border sisi kiri
`border-radius`	Membuat sudut elemen jadi membulat
`border-top-left-radius`	Mengatur radius sudut kiri atas
`border-top-right-radius`	Mengatur radius sudut kanan atas
`border-bottom-left-radius`	Mengatur radius sudut kiri bawah
`border-bottom-right-radius`	Mengatur radius sudut kanan bawah
`outline`	Mirip border tapi tidak mempengaruhi ukuran elemen
`outline-offset`	Mengatur jarak outline dari elemen

Kapan Harus Pakai Border Radius?

✅ Untuk elemen UI seperti tombol, card, atau input form
✅ Untuk efek hover biar kelihatan lebih interaktif
✅ Untuk desain modern dan minimalis

Contoh kombinasi keren:

button {
  padding: 10px 20px;
  border: none;
  background-color: #2ecc71;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
}

button:hover {
  background-color: #27ae60;
}

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Tombol CSS</title>
  <style>
    button {
      padding: 10px 20px;
      border: none;
      background-color: #2ecc71;
      color: white;
      border-radius: 8px;
      cursor: pointer;
      transition: 0.3s ease;
    }

    button:hover {
      background-color: #27ae60;
    }
  </style>
</head>
<body>

  <h2>Contoh Tombol dengan CSS</h2>
  <button>Klik Saya</button>

</body>
</html>

Hasilnya:

Gambar 20.2 : Contoh CSS border-radius

Penjelasan:

border-radius: 8px;: Membuat sudut tombol menjadi membulat (radius 8 piksel).
cursor: pointer;: Saat mouse diarahkan ke tombol, kursor berubah jadi tangan (tanda bisa diklik).
transition: 0.3s ease;: Animasi transisi selama 0.3 detik saat berubah (misal saat hover).

Penutup

CSS border-radius itu simpel tapi powerful. Dengan hanya satu baris kode, kamu bisa bikin tampilan yang jauh lebih menarik dan enak dilihat. Jangan lupa juga eksplor semua properti border lainnya buat styling yang lebih fleksibel.

Selamat ngoding dan selamat bermain dengan border! 🚀

Kalau kamu suka artikel ini, jangan lupa share ya biar teman-teman yang lain juga makin jago CSS! 😊

filesop.com