0Pricing
CSS Academy · Pelajaran

Gaya, Lebar, dan Warna Batas

Terapkan batas dengan berbagai gaya, lebar, dan warna menggunakan properti singkat dan lengkap.

Gaya, Lebar, dan Warna Batas adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Singkatan border

Singkatan border menetapkan keempat sisi sekaligus: lebar, gaya, dan warna.

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

Nilai border-style

border-style harus ditetapkan agar border terlihat. Nilai yang tersedia:

  • solid — garis kontinu
  • dashed — garis putus-putus panjang
  • dotted — titik-titik bulat
  • double — dua garis sejajar
  • groove/ridge/inset/outset — efek tiga dimensi
  • none — tanpa border (default)

border-width

border-width menerima satuan panjang apa pun atau kata kunci thin, medium, thick. Gunakan angka untuk ketepatan.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

border-color

border-color menerima nilai warna CSS apa pun, termasuk RGBA untuk transparansi. currentColor mewarisi warna teks.

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

Border Sisi Individual

Tetapkan border pada sisi tertentu dengan properti bentuk panjang:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

border-radius

border-radius membulatkan sudut elemen. Gunakan satu nilai untuk pembulatan seragam atau hingga empat nilai untuk mengendalikan setiap sudut.

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

border-radius Eliptis

Radius setiap sudut dapat memiliki dua nilai yang dipisahkan oleh / untuk pembulatan eliptis asimetris:

<div class="leaf"></div>

border-image

border-image mengganti border dengan gambar yang dipotong atau gradien, sehingga memungkinkan pembuatan border dekoratif:

<div class="fancy">Gradient border image</div>

outline vs border

outline menggambar garis di luar border. Berbeda dari border, outline tidak memengaruhi tata letak atau dimensi elemen. Outline biasanya digunakan sebagai indikator fokus keyboard.

<button class="focus-demo">Focused Button (demo)</button>

Menghapus outline: Gunakan dengan Bijak

Jangan pernah menghapus outline :focus tanpa menyediakan indikator fokus alternatif yang terlihat. Menghapus gaya fokus merugikan pengguna keyboard dan pembaca layar.

<button>Button without outline</button>
<a href="#">Link without outline</a>

border-collapse untuk Tabel

Untuk tabel HTML, border-collapse: collapse menggabungkan border sel yang berdekatan menjadi satu garis agar tampilannya lebih rapi.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Pemeriksaan Singkat

Properti CSS manakah yang menggambar garis di luar border tanpa memengaruhi tata letak elemen?

Ringkasan

Singkatan border menetapkan lebar, gaya, dan warna. border-radius membulatkan sudut. outline terpisah dari border — properti ini tidak memengaruhi tata letak dan penting sebagai indikator fokus untuk aksesibilitas keyboard.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Gaya, Lebar, dan Warna Batas” gratis?

Ya — teks lengkap “Gaya, Lebar, dan Warna Batas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Gaya, Lebar, dan Warna Batas”?

Terapkan batas dengan berbagai gaya, lebar, dan warna menggunakan properti singkat dan lengkap. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Gaya, Lebar, dan Warna Batas” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Memahami Lebar, Tinggi, Margin, dan Padding
  2. Gaya, Lebar, dan Warna Batas
  3. Ukuran Kotak: Content-Box vs Border-Box
  4. Outline dan Box-Shadow
← Kembali ke CSS Academy