Kursus Membuat Web

iklan

Border CSS

Border Style

Property border-style menentukan jenis border untuk ditampilkan.

Nilai border-style :

none : tidak ada border

dotted: mendefinisikan border bertitik

dashed: mendefinisikan border putus-putus

solid: mendefinisikan border padat (solid)

double: mendefinisikan dua border. Nilai lebar dua border sama

groove: mendefinisikan border beralur 3D. Efeknya tergantung pada nilai border- color

ridge: mendefinisikan ridge border beralur 3D. Efeknya tergantung pada nilai border- color

inset: mendefinisikan inset border beralur 3D. Efeknya tergantung pada nilai border- color

outset: mendefinisikan outset border beralur 3D. Efeknya tergantung pada nilai border- color

Border Width

Property border - width digunakan untuk mengatur lebar border.

Lebar diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan : thin, medium, thick.

Catatan: property "border-width" tidak akan bekerja jika digunakan sendiri. Pertama gunakan property "border-style" untuk mengatur style border.

Contoh
p.one  {
  border-style: solid;
  border-width: 5px;
}

p.two  {
  border-style: solid;
  border-width: medium;
}
Lihat ...

Border Color

Property border - color digunakan untuk mengatur warna border. Warna dapat diatur dengan :

  • Nama - menentukan nama warna, seperti "red"
  • RGB - menentukan nilai RGB, seperti "rgb (255,0,0)"
  • Hex - menentukan nilai hex , seperti "#ff0000"

Anda juga dapat mengatur warna border menjadi "transparan".

Jika warna border tidak diatur maka nilai warna diwariskan dari property warna elemen.

Catatan: property "border-color" tidak bekerja jika digunakan sendiri. Pertama, gunakan property "border-style" untuk mengatur style border.

Contoh
p.one  {
    border-style: solid;
    border-color: red;
 }
  
 p.two  {
    border-style: solid;
    border-color: #98bf21;
 }
Lihat ...

Border - Individu

Dalam CSS di mungkin untuk menentukan border yang berbeda untuk tiap sisi :

Contoh
p  {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
Lihat ...

Contoh di atas juga dapat diatur dengan property tunggal :

Contoh
p {
  border-style: dotted solid;
}
Lihat ...

Property border-style memiliki satu sampai empat nilai .

  • border-style: dotted solid double dashed;
    • border atas adalah dotted
    • border kanan adalah solid
    • border bawah adalah double
    • border kiri adalah dashed
  • border-style: dotted solid double;
    • border atas adalah dotted
    • border kanan dcan kiri solid
    • border bawah adalah double
  • border-style: dotted solid;
    • border atas dan bawah adalah dotted
    • border kanan dan kiri adalah solid
  • border-style: dotted;
    • semua border adalah dotted

Contoh di atas menggunakan property border-style, ini juga bekerja dengan border-width dan border-color.

Semua Property Border CSS

Property Keterangan
border mengatur semua property border dalam satu deklarasi
border-bottom mengatur semua property bottom border dalam satu deklarasi
border-bottom-color mengatur warna bottom border
border-bottom-style mengatur style dari bottom border
border-bottom-width mengatur width dari bottom border
border-color mengatur warna dari empat border
border-left mengatur semua property left border dalam satu deklarasi
border-left-color mengatur Sets the color of the left border
border-left-style mengatur style dari left border
border-left-width mengatur width dari left border
border-right mengatur semua property right border dalam satu deklarasi
border-right-color mengatur warna right border
border-right-style mengatur Sets the style of the right border
border-right-width mengatur width dari right border
border-style mengatur style dari empat border
border-top mengatur semua property top border dalam satu deklarasi
border-top-color mengatur warna dari top border
border-top-style mengatur style of the top border
border-top-width mengatur width dari top border
border-width mengatur width dari empat border

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015