Pengembang dapat menerapkan beberapa properti CSS untuk membuat halaman web mereka lebih menarik, seperti “ tinggi ' Dan ' lebar ” properti untuk mengatur ukuran, “ perataan teks ” untuk menyesuaikan teks, “ gaya perbatasan ' Dan ' radius perbatasan ” properti untuk mengatur batas di sekitar elemen. Selain itu, Anda dapat menambahkan batas sesuai kebutuhan Anda, seperti di satu sisi elemen, hanya untuk membuat hal-hal di belakang objek lebih terlihat.
Posting ini akan menunjukkan:
Metode 1: Tetapkan Perbatasan di Satu Sisi
Di CSS, pengguna dapat mengatur batas di satu sisi elemen yang diinginkan. Untuk tujuan ini, “ perbatasan-kiri ”, “ perbatasan-kanan ”, “ perbatasan-atas ' Dan ' perbatasan-bawah ” properti digunakan untuk menambahkan batas di sisi kiri, kanan, atas, atau bawah.
Di bagian ini, kami akan secara khusus mengatur batas di sisi kiri wadah. Untuk melakukannya, ikuti petunjuk yang disebutkan di bawah ini.
Langkah 1: Buat Kontainer div
Pertama, buat wadah div dengan bantuan “ Langkah 2: Sisipkan Tajuk Selanjutnya, gunakan “< h1> ” untuk menambahkan tajuk di dalam wadah div. Selain itu, Anda juga dapat menggunakan tag heading lain sesuai kebutuhan, seperti “< h1> ” menjadi “< h6> ” tag: Sekarang, akses wadah div HTML, dan akses nama kelas. Untuk melakukannya, pemilih kelas “ # ” digunakan dengan nama kelas. Langkah 4: Sisipkan Perbatasan di Satu Sisi Saja Setelah mengakses wadah div, terapkan properti CSS yang disebutkan di bawah ini: Gambar yang dihasilkan menunjukkan batas hanya dengan satu sisi: Untuk mengatur border di semua sisi dengan warna yang berbeda, gunakan kode HTML di atas. Kemudian, akses wadah div dengan bantuan nama id dan pemilih: Akibatnya, batas dengan gaya berbeda di setiap sisi akan diterapkan: Untuk mengatur batas di satu sisi saja, pertama, buat div menggunakan “
< h1 > Perbatasan di Satu Sisi h1 >
div >
Dapat dilihat bahwa wadah telah berhasil dibuat:
Langkah 3: Akses div Container
border-left: 5px padat merah ;
latar belakang: rgb ( 56 , 239 , 245 ) ;
margin: 20px 100px;
lebar:200px; tinggi: 150px
}
Di Sini:
Metode 2: Tetapkan Perbatasan di Semua Sisi Dengan Gaya Berbeda
margin: 80px;
lebar batas: 8px 2px 1px 10px;
border-radius: 50px;
border-style: inset padat bertitik ganda;
warna batas: rgb ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}
Dalam kode yang disediakan di atas:
Pada artikel ini, Anda telah mempelajari berbagai cara untuk mengatur batas CSS pada satu dan beberapa sisi. Kesimpulan