Border dan radius

Pelajaran 5 dari 8 dalam kursus Proyek CSS: Tombol Keren di Coddy.

Elemen button di HTML memiliki border bawaan, mari kita sesuaikan!

Untuk membuat border membulat, gunakan property border-radius (gunakan nilai yang sama seperti pada padding atau margin), contohnya,

#rounded {
	border-radius: 8px;
}

Untuk menghapus border sepenuhnya, kamu bisa menimpanya dengan,

#no-border {
	border: none;
}

Petunjuk: jika kamu mengatur border-radius ke nilai yang besar, bentuknya akan menjadi lingkaran!

Tantangan

Mudah

Tugas:

Ubah border radius menjadi lebih besar dari 0
Ubah border menjadi sesuatu yang berbeda dari nilai bawaan

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
    </body>
</html>

Semua pelajaran di Proyek CSS: Tombol Keren

1Pengantar

Pengantar Bagian HTML

2Proyek CSS

Ukuran

Warna

Border dan radius Pelajaran proyek

Bayangan

Efek hover

Penataan akhir

Latihan sendiri: Playground Web