KlikBelajar.com Edukasi, Belajar dan Informasi
Jenis Jenis Border.
Tutorial kali ini kita akan membahas mengenai
pengertian dan fungsi edge pada CSS.
Sebelumnya kita telah membahas mengenai penggunaan dan fungsi Background untuk CSS.
Edge sering digunakan dalam desain tampilan website.
Daftar Isi:
Apa Pengertian dan Fungsi Border pada CSS?
Border kalo kita terjemahkan ke Bahasa Indonesia artinya “batas / pinggir“, mungkin digunakan untuk membatasi.
Edge pada CSS menyediakan pengaturan tampilan desain website baik dari manner, lebar (width), maupun warna (color) dari sebuah elemen border.
Untuk selanjutnya kita akan membahas satu per satu mengenai penggunaan edge ini.
i. Border Style CSS (Corak Border)
Properti edge-style digunakan untuk memilih tipe border yang akan ditampilkan. Ada banyak tipe border pada CSS seperti titik dll. Berikut ini penjelasannya.
dotted
– untuk membuat border titik
dashed
– untuk membuat border garis
solid
– untuk membuat edge solid (garis tebal)
double
– untuk membuat border double
groove
– untuk membuat border grooved 3D. Efek ini terjadi ketika ada nilai border-colour.
ridge
– untuk membuat border 3D ridge. Efek ini juga terjadi ketika ada nilai border-colour.
inset
– untuk membuat 3D border masuk kedalam
starting time
– untuk membuat 3D border
none
– untuk membuat tidak ada border
hidden
– untuk membuat border tersembunyi
Untuk properti border-mode ini dapat mempunyai satu sampai dengan empat nilai (height border, correct border, bottom edge, dan left border).
Contoh Kode:
<!DOCTYPE html> <html> <head> <style> p.titik {border-mode:dotted;} p.garis {edge-fashion:dashed;} p.solid {edge-fashion:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {edge-mode:ridge;} p.inset {border-style:inset;} p.offset {border-style:outset;} p.none {edge-manner:none;} p.hidden {border-style:hidden;} p.campur {border-way: dashed dotted solid double;} </style> </head> <body> <h1>Contoh Properti border-mode</h1> <p course="titik">Border titik</p> <p class="garis">Border garis-garis</p> <p class="solid">Border solid</p> <p class="double">Border double</p> <p form="groove">Border groove</p> <p class="ridge">Border ridge</p> <p form="inset">Border inset</p> <p class="beginning">Border outset</p> <p class="none">Tidak ada border </p> <p class="hidden">Edge tersembunyi</p> <p class="campur">Border campuran</p> </trunk> </html>
Output Kode:
two. Border Width CSS (Lebar Border)
Properti dari edge-width digunakan untuk menentukan lebar dari keempat border. Lebar dapat diatur menjadi ukuran yang spesifik (dalam px, pt, cm, em, dan lainnya). Atau bisa juga menggunakan iii(tiga) nilai pre-defined: thin, medium, atau tick.
Properti edge-width ini bisa mempunyai satu sampai dengan empat nilai (untuk top border, right border, bottom border, dan left border).
Contoh Kode:
<!DOCTYPE html> <html> <head> <style> p.satu { border-way: solid; border-width: medium; } p.dua { border-style: solid; border-width: 4px; } p.tiga { border-style: dotted; edge-width: thick; } p.empat { border-style: double; border-width: 3px 5px 4px 18px; } p.lima { edge-way: solid; edge-width: thick; } </manner> </head> <body> <h1>Contoh Properti dari border-width</h1> <p class="satu">Contoh Teks<p> <p form="dua">Contoh Teks<p> <p class="tiga">Contoh Teks<p> <p class="empat">Contoh Teks<p> <p class="lima">Contoh Teks<p> </torso> </html>
Output Kode:
3. Border Color (Warna Border)
Properti edge-color digunakan untuk mengatur warna dari empat border. Warna dari border dapat diatur dengan menggunakan perintah:
*nama
– menggunakan nama dari warna, misalnya “crimson”.
*Hex
– menggunakan nilai hexadesimal, misalnya “#fff000”
*RGB
– menggunakan nilai dari RGB (Red, Green, Blueish), misalnya “rgb(0,255,0)”.
*transparent
Pada property border-color bisa mempunyai nilai satu sampai dengan empat nilai (untuk border atas, border kanan, border bawah dan border kiri).
Jika properti dari border-color tidak didefinisikan, maka otomatis akan diwariskan dari element.
Perlu diingat…
untuk mendefinisikan warna properti border-colour harus menggunakan properti border-way.
Contoh Kode:
<!DOCTYPE html> <html> <head> <style> p.satu { border-way: solid; border-color: green; } p.dua { edge-style: solid; border-color: blueish; } p.tiga { border-style: solid; border-colour: dark-green red yellowish orange; /*atas->hijau, kanan->merah, bawah->kuning, kiri->orange */ } </style> </head> <body> <h1>Contoh Properti border-colour CSS</h1> <p class="satu">Warna edge hijau</p> <p class="dua">Warna border biru</p> <p class="tiga">Warna border asik</p> </body> </html>
Output Kode:
Bagaimana Cara Menggunakan Border Satu Sisi…?
Dari contoh diatas kita dapat melihat bahwa untuk membuat border pada setiap satu sisi bisa dilakukan. Pada CSS, juga terdapat properti spesifik untuk mendefinisikan setiap sisi edge (atas, kanan, bawah, dan kiri). Anda bisa mencoba kode dibawah ini untuk lebih mengerti tentang pengertian dan fungsi border pada CSS…
Contoh Kode:
<!DOCTYPE html> <html> <caput> <mode> p { edge-top-style: solid; border-right-style: dashed; edge-bottom-style: solid; border-left-mode: dashed; } </style> </head> <body> <p>Contoh Border style yang beda pada setiap sisi</p> </body> </html>
Output Kode:
Pada contoh sebelumnya juga akan mendapat hasil sama ketika kode seperti ini.
<!DOCTYPE html> <html> <head><manner> p { border-way: solid dashed; } </manner> </caput> <body> <p>Contoh Border style yang beda pada setiap sisi</p> </body> </html>
Output Kode:
Maka, cara kerja dari border-style lebih detailnya…
*Jika properti border-manner punya empat nilai:
border-way: solid double dashed none;
– border atas solid
– edge kanan double
– border bawah dashed
– border kiri none
*Jika properti border-mode punya tiga nilai:
border-mode: solid double dashed;
– edge atas solid
– border kanan dan kiri double
– border bawah dashed
*Jika properti border-style punya dua nilai:
edge-style: solid double;
– border atas dan bawah solid
– edge kanan dan kiri double
*Jika properti border-style punya satu nilai:
edge-way: solid;
– semua keempat border adalah solid
Bagaimana Cara Menyingkat Penulisan Properti Border…?
Seperti yang anda lihat pada contoh sebelumnya, ada banyak properti untuk penerapan border. Menyingkat kode, juga mungkin diterapkan dalam satu properti border.
Menyingkat properti edge dilakukan dengan urutan properti : edge-width, border-style (harus ada), dan border-color.
Contoh Kode:
<!DOCTYPE html> <html> <head> <style> p { border: 3px solid red; } </way> </caput> <body> <h1>Contoh Properti Border</h1> <p>Contoh gabungan dari properti edge</p> </body> </html>
Output Kode:
Selain itu, kita juga bisa mendefinisikan border hanya satu sisi saja. Berikut ini untuk lebih jelasnya untuk memahami pengertian dan fungsi border pada CSS…
ane. Left Border
Menggunakan border hanya pada sisi kiri saja.
Contoh Kode:
<!DOCTYPE html> <html> <head> <manner> p { border-left: 5px solid blue; background-color: #999; } </style> </head> <body> <h2>Contoh Properti edge-left</h2> <p>Belajar CSS memang sangat menyenangkan... apalagi bisa membuat warna warni tulisan... hehehe</p> </body> </html>
Output Kode:
2. Lesser Border
Anda juga bisa menggunakan edge hanya pada sisi bawah saja.
Contoh Kode:
<!DOCTYPE html> <html> <head> <style> p { edge-bottom: 4px solid crimson; background-color: #999; } </mode> </caput> <body> <h1>Contoh Properti border-bottom</h1> <p>Belajar CSS sangat asik sekali.... kita bisa buat website dengan tampilan elegan</p> </trunk> </html>
Output Kode:
3. Rounded Borders
Kita bisa menggunakan perintah properti border-radius untuk menambahkan lekukan seperti lingkaran pada elemen border. Namun, border-radius ini tidak didukung oleh IE8 dan sebelumnya.
Contoh Kode:
<!DOCTYPE html> <html> <head> <style> p.normal { edge: 3px solid blue; } p.lingkaran1 { border: 3px solid blue; border-radius: 5px; } p.lingkaran2 { border: 3px solid bluish; edge-radius: 8px; } p.lingkaran3 { border: 3px solid bluish; border-radius: 14px; } </style> </head> <body> <h1>Contoh Properti border-radius</h1> <p>Properti "border-radius" ini digunakan untuk menambahkan lingkaran pada masing - masing border. </p> <p course="normal">Border Normal</p> <p grade="lingkaran1">Edge Agak Melingkar</p> <p class="lingkaran2">Border Melingkar</p> <p class="lingkaran3">Border Lebih Melingkar</p> </trunk> </html>
Output Kode:
Demikian tutorial belajar CSS mengenai pengertian dan fungsi border pada CSS untuk mengatur tata letak website.
Selanjutnya kita akan membahas mengenai cara menggunakan margin pada CSS.
Semoga tutorial ini bermanfaat dan terima kasih.
Jenis Jenis Border
Source: https://ayamkoding.com/pengertian-fungsi-border-css/
