Latest web development tutorials

CSS Border (Perbatasan)

sifat perbatasan CSS

sifat perbatasan CSS memungkinkan Anda untuk menentukan gaya perbatasan elemen dan warna.

Gaya perbatasan

properti gaya perbatasan menentukan apa jenis perbatasan yang akan ditampilkan.

ucapan Propertiborder-style digunakan untuk menentukan gaya perbatasan

nilai border-style:

none: Tidak ada border default

burik: burik: Mendefinisikan tenda

berlari: Mendefinisikan kotak putus-putus

padat: definisi perbatasan padat

ganda: mendefinisikan dua batas. Nilai yang sama dari lebar dua perbatasan dan batas-lebar

groove: alur didefinisikan perbatasan 3D. Efeknya tergantung pada nilai-nilai warna batas

ridge: definisi 3D perbatasan punggungan. Efeknya tergantung pada nilai-nilai warna batas

inset: Mendefinisikan sebuah perbatasan 3D tertanam. Efeknya tergantung pada nilai-nilai warna batas

awal: Mendefinisikan sebuah perbatasan awal 3D. Efeknya tergantung pada nilai-nilai warna batas

Coba: mengatur gaya perbatasan

perbatasan Lebar

Anda dapat menentukan lebar perbatasan dengan atribut border-width.

Menentukan lebar untuk perbatasan dalam dua cara: Anda dapat menentukan panjang nilai, seperti 2px atau 0.1em; atau menggunakan salah satu dari tiga kata kunci, yaitu tipis, sedang (default) dan tebal.

Catatan: CSS tidak mendefinisikan tiga kata kunci lebar tertentu, sehingga agen pengguna mungkin tipis, sedang dan tebal masing-masing diatur sama dengan 5px, 3px, dan 2px, sementara agen pengguna lain, masing-masing, diatur untuk 3px, 2px dan 1px.

contoh

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

Coba »

Warna perbatasan

Properti border-color menetapkan warna perbatasan. Anda dapat mengatur warna:

  • nama - Menentukan nama warna, seperti "merah"
  • RGB - menentukan nilai RGB, seperti "rgb (255,0,0)"
  • Hex - Menentukan nilai heksadesimal, seperti "# ff0000"

Anda juga dapat mengatur warna perbatasan untuk "transparan".

Catatan: border-color saja tidak bekerja, Anda harus harus menggunakan border-style untuk mengatur gaya perbatasan.

contoh

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

Coba »

Border - pengaturan terpisah untuk setiap sisi

Dalam CSS, Anda dapat menentukan sisi yang berbeda perbatasan yang berbeda:

contoh

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

Coba »

Contoh di atas juga dapat mengatur atribut tunggal:

contoh

border-style:dotted solid;

Coba »

Properti border-style dapat memiliki satu sampai empat nilai:

  • border-style: dotted ganda padat putus-putus ;
    • Perbatasan dihiasi
    • batas kanan solid
    • Sebuah perbatasan double bottom
    • perbatasan kiri putus-putus

  • border-style: dotted padat ganda;
    • Perbatasan dihiasi
    • Kiri dan batas kanan solid
    • Sebuah perbatasan double bottom

  • border-style: dotted padat;
    • Pada bagian bawah adalah perbatasan bertitik
    • perbatasan kanan dan kiri yang padat

  • border-style: dotted;
    • Dikelilingi oleh garis putus-putus

Contoh di atas menggunakan border-style. Namun, juga bisa border-width, border-color bersama-sama.

Border - properti singkat

Contoh di atas menggunakan banyak properti untuk mengatur perbatasan.

T Anda juga dapat mengatur perbatasan di properti.

Anda dapat "perbatasan" atribut set:

  • border-width
  • border-style (wajib)
  • border-color

contoh

border:5px solid red;

Coba »

contoh

contoh yang lebih

Semua properti perbatasan dalam satu deklarasi yang
Contoh ini menunjukkan properti steno untuk mengatur semua empat properti perbatasan dalam laporan yang sama.

Pengaturan gaya perbatasan
Contoh ini menunjukkan bagaimana untuk mengatur gaya perbatasan bawah.

Mengatur lebar 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. Anda dapat menetapkan satu empat warna.

Mengatur warna dari batas kanan
Contoh ini menunjukkan bagaimana untuk mengatur warna dari batas kanan.

sifat perbatasan CSS

milik deskripsi
batas properti singkat digunakan untuk mengatur properti dari empat sisi dalam sebuah pernyataan.
border-style Hal ini digunakan untuk mengatur gaya perbatasan semua elemen, atau secara terpisah mengatur gaya perbatasan untuk setiap sisi.
border-width Semua perbatasan properti singkat menetapkan lebar untuk elemen, atau ditetapkan secara individual lebar untuk setiap sisi perbatasan.
border-color Singkatan properti, unsur semua bagian warna perbatasan terlihat, atau mengatur warna, masing-masing empat sisi.
border-bottom properti singkat digunakan untuk mengatur semua atribut perbatasan untuk sebuah pernyataan.
border-bottom-warna Mengatur warna batas bawah dari elemen.
border-bottom-style Mengatur elemen gaya perbatasan.
border-bottom-width Mengatur lebar dari batas bawah dari elemen.
perbatasan-kiri properti singkat digunakan untuk mengatur semua properti perbatasan kiri pernyataan.
perbatasan-kiri-warna Mengatur warna dari elemen batas kiri.
perbatasan-kiri-gaya Unsur gaya batas kiri.
perbatasan-kiri-lebar Unsur lebar perbatasan kiri.
batas kanan properti singkat untuk setting semua properti di sebelah kanan kotak untuk sebuah pernyataan.
batas kanan-warna Mengatur warna dari elemen batas kanan.
batas kanan-style Unsur gaya batas kanan.
batas kanan-lebar Mengatur lebar dari elemen batas kanan.
border-top properti singkat untuk setting semua properti di perbatasan pernyataan.
border-top-warna Elemen diatur pada warna perbatasan.
border-top-style Elemen diatur pada gaya perbatasan.
border-top-width Elemen diatur pada lebar perbatasan.