Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Border Radius: Dari Kotak ke Lingkaran dan Bentuk Organik

Properti border-radius menentukan seberapa melengkung sudut dari sebuah elemen. Rahasia di balik bentuk yang indah terletak pada bagaimana kita mendefinisikan radius pada setiap sudutnya.

1. Konsep Dasar dan Satuan

border-radius dapat menerima satuan px, em, atau %.

• Pixel (px): Memberikan kelengkungan yang tetap. Cocok untuk sudut kecil pada kartu (card).

• Persentase (%): Menghitung radius berdasarkan ukuran elemen itu sendiri.

2. Membuat Lingkaran dan Pill-Shape

A. Lingkaran Sempurna

Untuk membuat lingkaran, syaratnya adalah elemen harus berbentuk bujur sangkar (lebar dan tinggi sama) dan nilai border-radius harus minimal 50%.

.circle { width: 100px; height: 100px; border-radius: 50%;
}

B. Pill-Shape (Tombol Oval)

Jika lebar elemen lebih besar dari tingginya, memberikan nilai pixel yang besar (misal 999px) akan menciptakan bentuk kapsul atau pil.

.pill { widt h: 200px; height: 50px; border-radius: 50px; /* Gunakan nilai yang sama atau lebih besar dari tinggi */
}

3. Bentuk Organik dengan Sintaks Delapan Nilai

Tahukah Anda bahwa setiap sudut sebenarnya bisa memiliki dua radius yang berbeda (horizontal dan vertikal)? Kita bisa memisahkan keduanya menggunakan garis miring (/).

Sintaks: border-radius: [horizontal] / [vertical];

Dengan teknik ini, kita bisa membuat bentuk "gumpalan" (blob) yang terlihat sangat organik dan tidak kaku.

Contoh Bentuk Organik:

.organic-shape { width: 300px; height: 300px; background: linear-gradient(45deg, #3498db, #8e44ad); /* Urutan: top-left top-right bottom-right bottom-left */ border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

< !---->

Tutorial: Implementasi Bentuk Unik dalam UI

Mari kita buat sebuah elemen dekoratif yang menggunakan kombinasi teknik di atas.

Struktur HTML

<div class="blob-container"> <div cl ass="blob">div> <img src="profile.jpg" class="profile-pic" alt="Dika Antoni">
div>

Kode CSS

.blob-container { position: relative; width: 200px; height: 200px;
} .blob { position: absolute; width: 100%; height: 100%; background: #ffcc00; /* Membuat bentuk seperti telur yang tidak beraturan */ border-radius: 41% 59% 41% 59% / 65% 38% 62% 35%; z-index: 1;
} .profile-pic { position: absolute; width: 80%; height: 80%; top: 10%; left: 10%; object-fit: cover; /* Membuat foto mengikuti bentuk lingkaran * / border-radius: 50%; z-index: 2; border: 4px solid white;
}

Kesimpulan & Alat Bantu

1. Untuk Card: Gunakan radius kecil (4px - 12px) agar terlihat modern namun tetap kokoh.

2. Untuk Avatar: Selalu gunakan 50% pada elemen kotak.

3. Untuk Dekorasi: Gunakan sintaks delapan nilai.

Tips Pro: Karena menghitung delapan nilai secara manual sangat sulit, Anda bisa menggunakan alat bantu seperti Fancy Border Radius Generator untuk mendapatkan kode bentuk organik secara instan dengan cara menggeser titik-titik kontrol secara visual.

Teknik ini akan sangat keren jika Anda terapkan pada elemen profil atau dekorasi latar belakang di proyek SatuMedia agar terlihat lebih dinamis!