Tutorial CSS 12 menjelaskan Pengaturan Border HTML dengan CSS. Properti border memungkinkan Anda untuk menentukan bagaimana border kotak mewakili unsur harus melihat.
Tutorial CSS 12 menjelaskan Pengaturan Border HTML dengan CSS. Properti border memungkinkan Anda untuk menentukan bagaimana border kotak mewakili unsur harus melihat. Ada tiga sifat dari border Anda dapat mengubah:
- border-color menentukan warna perbatasan.
- border-style menentukan apakah perbatasan harus solid, garis putus-putus, garis ganda, atau salah satu dari nilai-nilai lain yang mungkin.
- Border-width menentukan lebar border.
Sekarang, kita akan melihat bagaimana menggunakan properti ini dengan contoh-contoh.
Properti Border-color
Properti border-color memungkinkan Anda untuk mengubah warna perbatasan yang mengelilingi sebuah elemen. Anda secara individu dapat mengubah warna bagian bawah, kiri, atas dan kanan border elemen menggunakan sifat:
- border-bottom-color perubahan warna batas bawah.
- border-top-color perubahan warna perbatasan atas.
- border-left-color perubahan warna perbatasan ke kiri.
- border-right-color perubahan warna batas kanan.
Contoh berikut menunjukkan pengaruh semua sifat ini :
<html><head><style type="text/css">p.example1{border:1px solid;border-bottom-color:#009900; /* Green */border-top-color:#FF0000; /* Red */border-left-color:#330000; /* Black */border-right-color:#0000CC; /* Blue */}p.example2{border:1px solid;border-color:#009900; /* Green */}</style></head><body><p class="example1">This example is showing all borders in different colors.</p><p class="example2">This example is showing all borders in green color only.</p></body></html>
Ini akan menghasilkan hasil sebagai berikut :
Properti border-style
Properti border-style memungkinkan Anda untuk memilih salah satu dari gaya berikut border :
- none: No border. (Setara border-width: 0;)
- solid: adalah Border garis yang solid tunggal.
- dotted: adalah Border serangkaian titik-titik.
- dashed: adalah Border serangkaian garis pendek.
- double: adalah Perbatasan dengan dua garis padat.
- groove: Border tampak seolah-olah itu diukir ke dalam halaman.
- ridge: Border terlihat kebalikan dari alur.
- inset: Border membuat kotak terlihat seperti itu tertanam di halaman.
- outset: Border membuat kotak terlihat seperti itu yang keluar dari kanvas.
- hidden: Sama seperti tidak ada, kecuali dalam hal resolusi border-konflik untuk elemen tabel.
Anda secara individu dapat mengubah style bottom,left, top, dan border kanan elemen menggunakan properti berikut:
- border-bottom-style mengubah style bottom border.
- border-top-style mengubah style perbatasan atas.
- border-left-style mengubah style border left.
- border-right-style perubahan gaya batas kanan.
Contoh berikut ini menunjukkan semua style border ini:
<html><head></head><body>.<p style="border-width:4px; border-style:none;">This is a border with none width.</p><p style="border-width:4px; border-style:solid;">This is a solid border.</p><p style="border-width:4px; border-style:dashed;">This is a dahsed border.</p><p style="border-width:4px; border-style:double;">This is a double border.</p><p style="border-width:4px; border-style:groove;">This is a groove border.</p><p style="border-width:4px; border-style:ridge">This is aridge border.</p><p style="border-width:4px; border-style:inset;">This is a inset border.</p><p style="border-width:4px; border-style:outset;">This is a outset border.</p><p style="border-width:4px; border-style:hidden;">This is a hidden border.</p><p style="border-width:4px;border-top-style:solid;border-bottom-style:dashed; border-left-style:groove; border-right-style:double;">This is a a border with four different styles.</p></body></html>
Ini akan menghasilkan hasil sebagai berikut :
Properti border-width :
Properti border-width memungkinkan Anda untuk mengatur lebar dari perbatasan elemen. Nilai properti ini bisa menjadi baik panjang di px, pt atau cm atau harus ditetapkan untuk thin, medium atau thick.
Anda secara individu dapat mengubah width bottom, top,left, dan border kanan elemen menggunakan properti berikut -
- border-bottom-width mengubah lebar bottom border.
- border-top-width mengubah lebar perbatasan atas.
- border-left-width perubahan lebar perbatasan left.
- border-right-width perubahan lebar batas kanan.
Contoh berikut ini menunjukkan semua width border ini -
<html><head></head><body><p style="border-width:4px; border-style:solid;">This is a solid border whose width is 4px.</p><p style="border-width:4pt; border-style:solid;">This is a solid border whose width is 4pt.</p><p style="border-width:thin; border-style:solid;">This is a solid border whose width is thin.</p><p style="border-width:medium; border-style:solid;">This is a solid border whose width is medium;</p><p style="border-width:thick; border-style:solid;">This is a solid border whose width is thick.</p><p style="border-bottom-width:4px;border-top-width:10px;border-left-width: 2px;border-right-width:15px;border-style:solid;">This is a a border with four different width.</p></body></html>
Ini akan menghasilkan hasil sebagai berikut :
Properti Border dengan Singkatan
Properti border memungkinkan Anda untuk menentukan warna, gaya, dan lebar garis dalam satu properti:
Contoh berikut menunjukkan bagaimana menggunakan ketiga sifat tersebut menjadi satu properti. Ini adalah properti yang paling sering digunakan untuk mengatur border sekitar setiap elemen.
<html><head></head><body><p style="border:4px solid red;">This example is showing shorthand property for border.</p></body></html>
Ini akan menghasilkan hasil sebagai berikut :
COMMENTS