HTML Dasar #24 - Mengatur Border dan Border Radius (Membuat Kartu)

Setelah kita belajar margin (jarak luar) dan padding (jarak dalam), sekarang saatnya mengenal border (garis tepi) dan border-radius (sudut melengkung). Kedua properti ini adalah kunci membuat kartu (card) modern yang kamu lihat di website seperti Pinterest, Instagram, atau Twitter!

Apa Itu Border dan Border Radius?

Border adalah garis tepi yang mengelilingi elemen. Border-radius digunakan untuk membuat sudut elemen menjadi melengkung (rounded corners).

Box Model (lengkap):
• Margin → jarak luar (transparan)
• Border → garis tepi (bisa diatur warna, ketebalan, gaya)
• Padding → jarak dalam (kena background)
• Content → isi elemen

Ringkasan Properti Border

Properti	Fungsi	Contoh Nilai
`border-width`	Ketebalan garis tepi	`2px`, `thin`, `thick`
`border-style`	Gaya garis tepi	`solid`, `dashed`, `dotted`, `none`
`border-color`	Warna garis tepi	`red`, `#3b82f6`, `rgb(59,130,246)`
`border-radius`	Sudut melengkung	`10px`, `50%`, `1rem`
`border` (shorthand)	Gabungan width, style, color	`2px solid #3b82f6`

1. Border (Garis Tepi)

Border memiliki 3 komponen utama: ketebalan (width), gaya (style), dan warna (color).

Contoh Dasar Border:

<style>
    .border-solid { border: 2px solid #3b82f6; padding: 15px; margin: 10px; }
    .border-dashed { border: 2px dashed #ef4444; padding: 15px; margin: 10px; }
    .border-dotted { border: 2px dotted #22c55e; padding: 15px; margin: 10px; }
    .border-double { border: 4px double #8b5cf6; padding: 15px; margin: 10px; }
    .border-groove { border: 4px groove #f59e0b; padding: 15px; margin: 10px; }
</style>

<div class="border-solid">Solid (garis padat)</div>
<div class="border-dashed">Dashed (garis putus-putus)</div>
<div class="border-dotted">Dotted (garis titik-titik)</div>
<div class="border-double">Double (garis ganda)</div>
<div class="border-groove">Groove (efek 3D)</div>

Hasilnya:

Solid (garis padat)

Dashed (garis putus-putus)

Dotted (garis titik-titik)

Double (garis ganda)

Groove (efek 3D)

Border Per Sisi:

<style>
    .border-per-sisi {
        border-top: 3px solid #ef4444;
        border-right: 3px solid #22c55e;
        border-bottom: 3px solid #3b82f6;
        border-left: 3px solid #f59e0b;
        padding: 15px;
    }
</style>

<div class="border-per-sisi">
    Setiap sisi punya warna berbeda!
</div>

Setiap sisi punya warna berbeda!

2. Border Radius (Sudut Melengkung)

border-radius membuat sudut elemen menjadi melengkung. Semakin besar nilainya, semakin melengkung.

Contoh Border Radius:

<style>
    .radius-0 { border: 2px solid #3b82f6; border-radius: 0px; padding: 15px; margin: 10px; }
    .radius-5 { border: 2px solid #3b82f6; border-radius: 5px; padding: 15px; margin: 10px; }
    .radius-10 { border: 2px solid #3b82f6; border-radius: 10px; padding: 15px; margin: 10px; }
    .radius-20 { border: 2px solid #3b82f6; border-radius: 20px; padding: 15px; margin: 10px; }
    .radius-50 { border: 2px solid #3b82f6; border-radius: 50px; padding: 15px; margin: 10px; text-align: center; }
</style>

<div class="radius-0">border-radius: 0px (kotak)</div>
<div class="radius-5">border-radius: 5px (sedikit melengkung)</div>
<div class="radius-10">border-radius: 10px (standar kartu)</div>
<div class="radius-20">border-radius: 20px (sangat melengkung)</div>
<div class="radius-50">border-radius: 50px (bentuk pil/kapsul)</div>

Hasilnya:

border-radius: 0px (kotak)

border-radius: 5px (sedikit melengkung)

border-radius: 10px (standar kartu)

border-radius: 20px (sangat melengkung)

border-radius: 50px (bentuk pil/kapsul)

Membuat Lingkaran Sempurna dengan Border Radius:

<style>
    .circle {
        width: 100px;
        height: 100px;
        background-color: #3b82f6;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
</style>

<div class="circle">Lingkaran</div>

Lingkaran

border-radius: 50%; pada elemen persegi membuat lingkaran sempurna!

Tips Border Radius:

border-radius: 10px; → standar untuk kartu modern
border-radius: 50%; → membuat lingkaran (wajib width = height)
border-radius: 50px; → membuat bentuk pil/kapsul
Bisa beda per sudut: border-radius: 10px 20px 30px 40px; (atas-kiri, atas-kanan, bawah-kanan, bawah-kiri)

Studi Kasus: Membuat Kartu (Card) Modern

Kartu (card) adalah komponen UI yang sangat umum di website modern. Kombinasi border, border-radius, padding, margin, dan box-shadow membuat kartu terlihat profesional.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Card Modern - Border & Border Radius</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            text-align: center;
            color: white;
            margin-bottom: 30px;
            font-size: 32px;
        }
        
        .card-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
        }
        
        /* CARD DASAR */
        .card {
            background: white;
            width: 280px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 30px rgba(0,0,0,0.2);
        }
        
        /* CARD 1: Border Solid Sederhana */
        .card-1 {
            border: 2px solid #e2e8f0;
            border-radius: 12px;
        }
        
        /* CARD 2: Border dengan Warna */
        .card-2 {
            border: 2px solid #3b82f6;
            border-radius: 16px;
        }
        
        /* CARD 3: Tanpa Border (pakai shadow) */
        .card-3 {
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        /* CARD 4: Border Gradient (pake trik) */
        .card-4 {
            border: none;
            border-radius: 24px;
            position: relative;
            background: linear-gradient(white, white) padding-box,
                        linear-gradient(135deg, #667eea, #764ba2) border-box;
            border: 2px solid transparent;
        }
        
        /* Styling konten kartu (sama untuk semua) */
        .card-img {
            height: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
        }
        
        .card-1 .card-img { background: #f0f4f8; }
        .card-2 .card-img { background: #eff6ff; }
        .card-3 .card-img { background: #fef9c3; }
        .card-4 .card-img { background: #f3e8ff; }
        
        .card-content {
            padding: 20px;
        }
        
        .card-title {
            font-size: 20px;
            color: #1e293b;
            margin-bottom: 10px;
        }
        
        .card-desc {
            font-size: 14px;
            color: #64748b;
            line-height: 1.5;
            margin-bottom: 15px;
        }
        
        .card-price {
            font-size: 18px;
            font-weight: bold;
            color: #3b82f6;
            margin-bottom: 15px;
        }
        
        .btn {
            display: block;
            background: #3b82f6;
            color: white;
            text-align: center;
            padding: 10px;
            text-decoration: none;
            border-radius: 8px;
            font-weight: bold;
            transition: background 0.2s;
        }
        
        .btn:hover {
            background: #2563eb;
        }
        
        .info-box {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 25px;
            margin-top: 50px;
        }
        
        .info-box h3 {
            margin-bottom: 15px;
            color: #1e293b;
        }
        
        .info-box ul {
            margin-left: 20px;
        }
        
        .info-box li {
            margin-bottom: 8px;
            color: #334155;
        }
        
        code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Contoh Kartu dengan Border & Border Radius</h1>
        
        <div class="card-grid">
            <!-- CARD 1: Border Solid Sederhana -->
            <div class="card card-1">
                <div class="card-img"></div>
                <div class="card-content">
                    <h3 class="card-title">Border Solid</h3>
                    <p class="card-desc">Kartu dengan border solid abu-abu dan border-radius 12px.</p>
                    <p class="card-price">Rp 499.000</p>
                    <a href="#" class="btn">Beli Sekarang</a>
                </div>
            </div>
            
            <!-- CARD 2: Border Berwarna -->
            <div class="card card-2">
                <div class="card-img"></div>
                <div class="card-content">
                    <h3 class="card-title">Border Berwarna</h3>
                    <p class="card-desc">Border biru dengan ketebalan 2px dan border-radius 16px.</p>
                    <p class="card-price">Rp 8.999.000</p>
                    <a href="#" class="btn">Beli Sekarang</a>
                </div>
            </div>
            
            <!-- CARD 3: Tanpa Border (Box Shadow) -->
            <div class="card card-3">
                <div class="card-img"></div>
                <div class="card-content">
                    <h3 class="card-title">Tanpa Border</h3>
                    <p class="card-desc">Tanpa border, pakai box-shadow dan border-radius 20px.</p>
                    <p class="card-price">Rp 899.000</p>
                    <a href="#" class="btn">Beli Sekarang</a>
                </div>
            </div>
            
            <!-- CARD 4: Border Gradient -->
            <div class="card card-4">
                <div class="card-img"></div>
                <div class="card-content">
                    <h3 class="card-title">Border Gradient</h3>
                    <p class="card-desc">Border gradien ungu-ke-biru dengan border-radius 24px.</p>
                    <p class="card-price">Rp 2.499.000</p>
                    <a href="#" class="btn">Beli Sekarang</a>
                </div>
            </div>
        </div>
        
        <div class="info-box">
            <h3>Penjelasan Properti yang Digunakan</h3>
            <ul>
                <li><code>border: 2px solid #e2e8f0;</code> → garis tepi padat abu-abu ketebalan 2px</li>
                <li><code>border-radius: 12px;</code> → sudut melengkung 12px (standar kartu)</li>
                <li><code>border-radius: 50%;</code> → membuat lingkaran sempurna (jika width = height)</li>
                <li><code>border-radius: 50px;</code> → membuat bentuk pil/kapsul</li>
                <li><code>box-shadow: 0 10px 25px rgba(0,0,0,0.1);</code> → bayangan elegan tanpa border</li>
                <li><code>border: 2px solid transparent;</code> + background gradient → border gradien</li>
            </ul>
        </div>
    </div>

</body>
</html>

Hasil visual kartu-kartu di atas:

Contoh Kartu

Border Solid

Border solid abu-abu, radius 12px.

Rp 499.000

Beli

Border Berwarna

Border biru, radius 16px.

Rp 8.999.000

Beli

Tanpa Border

Pakai box-shadow, radius 20px.

Rp 899.000

Beli

Variasi Border Radius Lainnya

0px
Kotak

10px
Standar

20px
Melengkung

50%
Lingkaran

50px
Pil

Border Radius Per Sudut:

<style>
    .radius-custom {
        border: 2px solid #3b82f6;
        border-radius: 10px 30px 10px 30px;  /* atas-kiri, atas-kanan, bawah-kanan, bawah-kiri */
        padding: 20px;
    }
</style>

<div class="radius-custom">Sudut kiri atas dan kanan bawah 10px, kanan atas dan kiri bawah 30px</div>

Sudut kiri atas dan kanan bawah 10px, kanan atas dan kiri bawah 30px

Kesalahan Umum Pemula

Lupa menulis satuan px atau % → border-radius: 10; (salah) vs border-radius: 10px; (benar).
Lupa menulis border-style saat pakai shorthand → border: 2px #3b82f6; (salah, harus ada style seperti solid).
Mengira border-radius: 50%; selalu bikin lingkaran → Hanya jika width = height. Jika tidak, jadi oval.
Terlalu banyak border style yang tidak perlu → Untuk kartu modern, cukup solid atau none + box-shadow.
Lupa overflow: hidden; pada kartu dengan gambar → Gambar bisa keluar dari area border-radius.

Debugging Tips:

Jika border tidak muncul, cek apakah border-style sudah ditulis (solid, dashed, dll)
Jika border-radius tidak terlihat, pastikan elemen memiliki background atau border yang jelas
Gunakan Developer Tools (F12) → tab Styles → cek properti border dan border-radius

Latihan Singkat

Buat file HTML baru dengan judul "Latihan Border dan Card"
Buat sebuah <div> dengan border solid biru, border-radius 15px, padding 20px
Buat sebuah <div> dengan border dashed merah, border-radius 30px, padding 20px
Buat sebuah lingkaran (width=100px, height=100px, border-radius=50%) dengan background hijau
Buat sebuah kartu sederhana (border-radius 12px, padding 20px, box-shadow) berisi judul, deskripsi, dan tombol
Simpan dan buka di browser, amati hasilnya

Intisari Hari Ini

border → garis tepi elemen (width, style, color)
border-radius → membuat sudut melengkung
border: 2px solid #3b82f6; → shorthand paling umum
border-radius: 50%; → membuat lingkaran (jika width = height)
border-radius: 10px; → standar untuk kartu modern
Kombinasi border, border-radius, padding, margin, dan box-shadow = card profesional

Tantangan Akhir Pekan: Buat sebuah Halaman Portofolio dengan Galeri Kartu yang memanfaatkan berbagai variasi border dan border-radius! Persyaratan:

Minimal 6 kartu project portofolio (gambar + judul + deskripsi + tombol)
Setiap kartu harus memiliki border-radius yang berbeda (variasi 8px, 12px, 16px, 20px, 24px, 50%)
Kartu 1: border solid tipis + border-radius kecil
Kartu 2: border dashed + border-radius sedang
Kartu 3: tanpa border, pakai box-shadow + border-radius besar
Kartu 4: border dengan warna gradien (pake trik border transparent)
Kartu 5: border double + border-radius unik per sudut
Kartu 6: bentuk lingkaran (avatar) dengan border-radius 50%
Semua kartu memiliki efek hover (scale, shadow, atau perubahan border)
Buat kotak penjelasan di bawah yang menunjukkan kode CSS untuk setiap variasi border yang digunakan

Bonus: Buat gambar profile lingkaran dengan border-radius: 50%; dan border putih di sekelilingnya.

Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #23 - Mengatur Margin dan Padding untuk Jarak
Artikel Selanjutnya: HTML Dasar #25 - Membuat Navigasi Bar (Navbar) Sederhana dengan CSS

HTML Dasar #24 - Mengatur Border dan Border Radius (Membuat Kartu)

Apa Itu Border dan Border Radius?

Ringkasan Properti Border

1. Border (Garis Tepi)

Contoh Dasar Border:

Border Per Sisi:

2. Border Radius (Sudut Melengkung)

Contoh Border Radius:

Membuat Lingkaran Sempurna dengan Border Radius:

Studi Kasus: Membuat Kartu (Card) Modern

Contoh Kartu

Border Solid

Border Berwarna

Tanpa Border

Variasi Border Radius Lainnya

Border Radius Per Sudut:

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Categories

Main Tags

Latest Posts

Popular Posts

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin - Lanjutan dari ASP.NET Core API

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال