CSS Properti Perbatasan
CSS border properti memungkinkan Anda untuk menentukan gaya, lebar, dan warna perbatasan elemen ini.
Elemen ini memiliki perbatasan alur yang 15px lebar dan hijau.
Gaya perbatasan
The border-style properti menentukan jenis perbatasan apa yang akan ditampilkan.
Nilai-nilai berikut yang diizinkan:
-
dotted- Mendefinisikan perbatasan bertitik -
dashed- Mendefinisikan perbatasan putus-putus -
solid- Mendefinisikan sebuah perbatasan yang solid -
double- Mendefinisikan perbatasan ganda -
groove- Mendefinisikan sebuah perbatasan berlekuk 3D. Efeknya tergantung pada nilai border-color -
ridge- Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color -
inset- Mendefinisikan sebuah perbatasan inset 3D. Efeknya tergantung pada nilai border-color -
outset- Mendefinisikan sebuah perbatasan awal 3D. Efeknya tergantung pada nilai border-color -
none- Mendefinisikan ada batas -
hidden- Mendefinisikan perbatasan tersembunyi
The border-style properti dapat memiliki dari satu sampai empat nilai (untuk perbatasan atas, batas kanan, batas bawah, dan perbatasan kiri).
Contoh
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Hasil:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Cobalah sendiri "  | Catatan: Tidak ada sifat perbatasan CSS OTHER dijelaskan di bawah akan memiliki efek APAPUN kecuali border-style properti diatur! |
|---|
perbatasan Lebar
The border-width properti menentukan lebar empat perbatasan.
Lebar dapat diatur sebagai ukuran tertentu (dalam px, pt, cm, em , dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang, atau tebal.
The border-width properti dapat memiliki dari satu sampai empat nilai (untuk perbatasan atas, batas kanan, batas bawah, dan perbatasan kiri).
Contoh
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Cobalah sendiri " Warna perbatasan
The border-color properti digunakan untuk mengatur warna dari empat perbatasan.
warna dapat diatur oleh:
- name - menentukan nama warna, seperti "red"
- Hex - menentukan nilai hex, seperti "#ff0000"
- RGB - menentukan nilai RGB, seperti "rgb(255,0,0)"
- transparent
The border-color properti dapat memiliki dari satu sampai empat nilai (untuk perbatasan atas, batas kanan, batas bawah, dan perbatasan kiri).
Jika border-color tidak diatur, itu mewarisi warna dari elemen.
Contoh
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} Cobalah sendiri " Border - Individual Sides
Dari contoh di atas Anda telah melihat bahwa adalah mungkin untuk menentukan perbatasan yang berbeda untuk setiap sisi.
Dalam CSS, ada juga properti untuk menentukan masing-masing perbatasan (atas, kanan, bawah, dan kiri):
Contoh
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} Cobalah sendiri " Contoh di atas memberikan hasil yang sama seperti ini:
Jadi, di sini adalah cara kerjanya:
Jika border-style properti memiliki empat nilai:
- border-style : dotted ganda padat putus-putus;
- batas atas dihiasi
- batas kanan solid
- batas bawah adalah ganda
- perbatasan kiri putus-putus
Jika border-style properti memiliki tiga nilai:
- border-style : dotted padat ganda;
- batas atas dihiasi
- perbatasan kanan dan kiri yang padat
- batas bawah adalah ganda
Jika border-style properti memiliki dua nilai:
- border-style : dotted padat;
- batas atas dan bawah yang putus-putus
- perbatasan kanan dan kiri yang padat
Jika border-style properti memiliki satu nilai:
- border-style : dotted;
- keempat perbatasan yang putus-putus
The border-style properti digunakan dalam contoh di atas. Namun, ia juga bekerja dengan border-width dan border-color .
Border - Properti Steno
Seperti yang dapat Anda lihat dari contoh di atas, ada banyak sifat yang perlu dipertimbangkan ketika berhadapan dengan perbatasan.
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti perbatasan individu dalam satu properti.
The border properti adalah properti singkatan untuk properti border individu berikut:
-
border-width -
border-style(wajib) -
border-color
Contoh lebih
Semua properti perbatasan atas dalam satu deklarasi
Contoh ini menunjukkan properti singkat untuk setting semua properti untuk perbatasan atas dalam satu deklarasi.
Mengatur gaya perbatasan bawah
Contoh ini menunjukkan bagaimana untuk mengatur gaya perbatasan bawah.
Mengatur lebar dari perbatasan kiri
Contoh ini menunjukkan bagaimana untuk mengatur lebar perbatasan kiri.
Mengatur warna dari empat perbatasan
Contoh ini menunjukkan bagaimana untuk mengatur warna dari empat perbatasan. Hal ini dapat memiliki dari satu sampai empat warna.
Mengatur warna dari batas kanan
Contoh ini menunjukkan bagaimana untuk mengatur warna dari batas kanan.
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»
Semua Properti CSS Border
| Milik | Deskripsi |
|---|---|
| border | Set semua properti perbatasan dalam satu deklarasi |
| border-bottom | Set semua properti perbatasan bagian bawah dalam satu deklarasi |
| border-bottom-color | Mengatur warna border bottom |
| border-bottom-style | Set gaya perbatasan bawah |
| border-bottom-width | Set lebar batas bawah |
| border-color | Mengatur warna dari empat perbatasan |
| border-left | Set semua properti perbatasan kiri dalam satu deklarasi |
| border-left-color | Set warna perbatasan kiri |
| border-left-style | Set gaya perbatasan kiri |
| border-left-width | Set lebar perbatasan kiri |
| border-right | Set semua properti perbatasan yang tepat dalam satu deklarasi |
| border-right-color | Mengatur warna batas kanan |
| border-right-style | Set gaya batas kanan |
| border-right-width | Set lebar batas kanan |
| border-style | Set gaya dari empat perbatasan |
| border-top | Set semua properti perbatasan atas dalam satu deklarasi |
| border-top-color | Set warna perbatasan atas |
| border-top-style | Set gaya perbatasan atas |
| border-top-width | Set lebar perbatasan atas |
| border-width | Set lebar empat perbatasan |