Tutorial Belajar CSS Part 19 – Mengatur Border dengan CSS

Posted on Posted in Tutorial CSS

Dalam tutorial ini kita akan membahas mengenai penggunaan border pada CSS, border adalah garis yang ada pada obyek sehingga bisa menjadi pembatas satu obyek dengan obyek lainnya.

CSS menyediakan banyak fitur yang bisa anda gunakan untuk mengatur dari border, seperti mengatur bagaimana style garis, pewarnaan dan ukuran.

Baik Langsung saja untuk Fitur CSS yang bisa anda gunakan untuk mengatur border antara lain :

 

Border Style

Border style digunakan untuk mengatur bagaimana style dari sebuah garis, semisal anda ingin membuat garis lurus, garis putus putus dan model garis yang lain, anda dapat menggunakan property border-style, untuk lebih memahami silahkan perhatikan skrip dibawah ini :

 

 

semisal kita simpan dengan nama border-style.html, lalu kita buka di browser maka tampilannya adalah sebagai berikut :

Penjelasannya :

  • Terlihat beberapa paragraf yang menggunakan garis border yang berbeda, hal tersebut dikarenakan kita menggunakan border style yang berbeda di masing – masing paragraf
  • Perhatikan penggunaan masing masing dari value border-style pada masing masing class yang digunakan di masing masing paragraf
  • Jika anda belum memahami penggunaan class silahkan baca pembahasan kami mengenai jenis jenis selector css

 

 

 

Border-width

Selain bisa mengatur style dari garis border, CSS juga dapat digunakan untuk mengatur ukuran dari border. Anda bisa menentukan ukurannya apakah 1 px 2 px dan seterusnya.

Untuk lebih memahami silahkan perhatikan skrip dibawah ini :

 

 

semisal kita simpan dengan nama border-width.html lalu silahkan buka di browser, maka tampilannya adalah sebagai berikut :

Penjelasannya sebagai berikut :

  1. Paragraf pertama menggunakan ukuran border-width 2px; pada class satu
  2. Paragraf kedua menggunakan ukuran border-width 5px; pada class dua
  3. Paragraf ketiga menggunakan ukuran border-width thick; pada class tiga
  4. Paragraf keempat menggunakan ukuran border-width medium; pada class empat
  5. Paragraf kelima menggunakan ukuran border-width 10px 5px 1px 20px; maka ukuran border 10px (bagian atas), 5px (bagian kanan), 1px (bagian bawah), 20px (bagian kiri)

 

 

 

Border-Color

Selain merubah style garis dan ukuran garis, CSS juga dapat digunakan untuk mengatur warna dari garis, untuk lebih memahami silahkan perhatikan skrip dibawah ini :

 

Semisal kita simpan dengan nama border-color.html lalu silahkan buka di browser maka hasilnya adalah sebagai berikut :

Penjelasannya sebagai berikut :

  1. Paragraf pertama untuk border memiliki warna garis biru, karena class satu menggunakan property border-color:blue;
  2. Paragraf kedua untuk border memiliki warna garis orange, karena class dua menggunakan property border-color:orange;
  3. Paragraf ketiga untuk border memiliki warna garis biru(atas), merah(kanan), orange(bawah), dan hijau(kiri) karena class tiga menggunakan property border-color: blue red orange green;

 

 

Border Shorthand Property

Istilah shorthand adalah pemendekan dalam penulisan property border di CSS, jadi anda dapat menset style, ukuran dan warna garis border, secara bersamaan dalam satu perintah.

silahkan perhatikan skrip dibawah ini :

 

semisal kita simpan dengan nama border-shorthand.html lalu kita buka di browser, maka hasilnya adalah sebagai berikut :

Penjelasan :

  • Paragraf tersebut memiliki border dengan style garis lurus, ukuran 10 pixel dan berwarna biru, anda hanya perlu menuliskan border: 10px solid blue;

 

 

Individual Border

Selain anda bisa menuliskan perintah border secara bersamaan, anda juga bisa menuliskan perintah border dengan terpisah, maksud terpisah disini anda dapat mengatur bagian tertentu dari border, semisal anda ingin mengatur hanya bagian border atas yang menggunakan warna biru dan garis putus putus, nah anda bisa menuliskan dengan individual border ini, perhatikan skrip dibawah ini :

  • border-top-style : digunakan untuk mengatur style garis pada border bagian atas
  • border-right-style : digunakan untuk mengatur style garis pada border bagian kanan
  • border-bottom-style : digunakan untuk mengatur style garis pada border bagian bawah
  • border-left-style : digunakan untuk mengatur style garis pada border bagian kiri
  • border-top-width : digunakan untuk mengatur ukuran garis pada border bagian atas
  • border-right-width : digunakan untuk mengatur ukuran garis pada border bagian kanan
  • border-bottom-width : digunakan untuk mengatur ukuran garis pada border bagian bawah
  • border-left-width : digunakan untuk mengatur ukuran garis pada border bagian kiri
  • border-top-color : digunakan untuk mengatur warna garis pada border bagian atas
  • border-right-color : digunakan untuk mengatur warna garis pada border bagian kanan
  • border-bottom-color : digunakan untuk mengatur warna garis pada border bagian bawah
  • border-left-color : digunakan untuk mengatur warna garis pada border bagian kiri

Nah Sebagai Contoh Perhatikan skrip dibawah ini :

 

 

semisal kita simpan dengan nama individual-border.html lalu silahkan buka di browser :

maka hasilnya seperti gambar diatas, penjelasannya sebagai berikut :

Paragraf tersebut untuk border bagian atasnya menggunakan warna merah, dan garisnya solid, serta memiliki ukuran 5 pixel, hal tersebut karena menggunakan property dan value                 border-top-color: red;
border-top-width: 5px;
border-top-style: solid;

Paragraf tersebut untuk border bagian bawah menggunakan warna biru, dan garis solid, serta ukurannya 1 pixel, hal tersebut karena menggunakan property dan value 

border-bottom-color: blue;
border-bottom-width: 1px;
border-bottom-style: dotted;

 

 

Bagaimana teman – teman cukup mudah kan cara untuk mengatur border didalam CSS, kita telah belajar mengenai mengganti style, warna, dan ukuran garis, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial CSS Selanjutnya

 

Leave a Reply

Your email address will not be published. Required fields are marked *