Kegunaan Border untuk Bingkai Website - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Kegunaan Border untuk Bingkai Website, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel css, Artikel desain-web, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Kegunaan Border untuk Bingkai Website
link : Kegunaan Border untuk Bingkai Website

Baca juga


Kegunaan Border untuk Bingkai Website

 


Border dapat Memperjelas Konten dari Laman Web

Border/garis tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal. Border properti mendefinisikan width, color, and style dari batas area pada box/kotak.



CSS memberi Anda pilihan dalam menggunakan border antara lain :

  • border-style
  • border-width
  • border-color
  • border-individual

Border Style

Properti border-style untuk menentukan bentuk (style) dari tampilan border.
Tak satu pun dari properti border memiliki efek APAPUN kecuali telah menempatkan properti border-style dahulu!

Ada 9 type border-style values yang umum digunakan dalam CSS :
1. None : mendefinisikan tidak ada border
border style
2. Dotted : berarti border berupa dot (titik)
Dotted
3. Dashed : border berupa dashed (garis putus-putus)
Dashed

4. Solid : border yang solid
Solid
5. Double : mendefinisikan double border. Lebar double border adalah sama dengan nilai border-width
Double
6. Groove : mendefinisikan sebuah border groove (beralur) 3D. Efeknya tergantung pada nilai border-color
Groove
7. Ridge: mendefinisikan sebuah border bergerigi (ridge) 3D. Efeknya tergantung pada nilai border-color
Ridge
8. Inset: mendefinisikan sebuah border inset 3D. Efeknya tergantung pada nilai border-color
border

9. Outset : mendefinisikan sebuah border outset 3D. Efeknya tergantung pada nilai border-color
Outset

Border Width

 
Properti border-width digunakan untuk mengatur lebar border/garis tepi. Border diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan : thin, medium, dan thick.

 

Border Width
ukuran border dalam pixel dan value thin, medium, thick


Contoh :

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

 

p{ border-style:solid; border-width:medium; }

 

p{ border-style:solid; border-width:1px; }


Border Color
Properti border-color mendefinisikan warna yang dimiliki oleh border. Nilai-nilai yang normal penggunaan nilai warna misalnya: hex "# 123456", rgb "(123.123.123)" atau "blue". Anda juga dapat mengatur warna border menjadi "transparent".

color chart
chart warna hex

Contoh :

Border Color





 

Border - Individual sides
Dalam CSS Anda bisa juga menentukan border yang berbeda pada tiap sisi:

Border - Individual





Nah, gabungan dari pengaturan margin, padding dan border pada sebuah elemen dalam CSS sering disebut juga dengan "box model".
Diagram di bawah ini menunjukkan bagaimana box model dibangun:

diagram model box
diagram model box


Demikianlah Artikel Kegunaan Border untuk Bingkai Website

Sekianlah artikel Kegunaan Border untuk Bingkai Website kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Kegunaan Border untuk Bingkai Website dengan alamat link https://dev-create.blogspot.com/2023/10/kegunaan-border-untuk-bingkai-website.html