Gaya Border

Pelajaran 5 dari 6 dalam kursus Proyek CSS: Spinner Pemuatan Sederhana di Coddy.

Mari tambahkan gaya sudut membulat pada batas pemintal.

Untuk menambahkan warna batas hanya pada sudut tertentu, gunakan urutan (atas kanan bawah kiri).

border-color: black transparent black transparent

Kode di atas hanya akan menambahkan warna batas (hitam) pada batas atas dan bawah. Kamu juga bisa menggunakan properti border-top-color dan border-bottom-color!

Jangan lupa menambahkan border-width dan border-style.

Tantangan

Mudah

Hapus warna latar belakang spinner dan tambahkan properti CSS berikut:

border-width sebesar 6px
border-style dengan nilai solid
border-color hanya untuk bagian atas dan bawah, pilih warna apa pun yang kamu mau! (border kiri dan kanan harus transparent)

Buat juga seluruh border spinner menjadi bulat. Jika kamu tidak yakin cara melakukannya, lihat petunjuknya.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="spinner" />
</body>
</html>

Semua pelajaran di Proyek CSS: Spinner Pemuatan Sederhana

1Pengantar

Pengantar Bagian HTML

2Proyek CSS

Ukuran dan Warna

Putar!

Gaya Border Pelajaran proyek

Gaya Akhir

Latihan sendiri: Playground Web