Cara Mengatur Border pada CSS

Pada tutorial kali ini kita akan mempelajari cara mengatur border pada CSS. Border sendiri adalah garis pembatas elemen HTML dan kita dapat membuat elemen dengan tipe Border yang berbeda – beda. Kita dapat mendesain bagian Border manapun yang kita suka (atas, bawah, kanan, kiri), mengatur sudut border dengan membuatnya menjadi melengkung dan masih banyak lagi.

Perhatikan kode sumber di bawah ini :

Di bawah ini adalah output dari listing program di atas :

Cara Mengatur Border pada CSS

Garis berwarna biru pada gambar di atas lah yang disebut border, lalu ruang kosong yang berada di dalam border adalah padding, sedangkan ruang kosong yang berada di luar border adalah margin. Padding dan Margin ini adalah ruang kosong transparan yang digunakan untuk mengatur elemen.

Border Top, Bottom, Left, dan Right

Dalam pendesainan Border pada CSS, terdapat pula property yang berhubungan dengan property Border, di antaranya border-left, borderright, border-top, border-bottom. Dengan ke 4 property di atas, anda dapat dengan bebas mendesain desain border tanpa merubah sisi border yang lain apabila tidak di inginkan untuk dirubah.

Pada listing program di atas, saya mendesain border bagian atas bertipe dashed, berwarna biru, dengan ketebalan 4px. Hal ini dapat saya lakukan dengan menggunakan properti border-top.

Hasil Outputnya adalah seperti gambar di bawah ini…

mendesain border pada css

Tidak hanya itu, anda juga dapat memilih satu tipe property dalam mendesain border misal border-top-style, yang menandakan anda hanya dapat merubah style border bagian atas, dan tidak bisa untuk merubah ketebalan atau warna atau property lainnya.

Kasus – kasus di atas dikenal dengan istilah CSS Shorthand atau jalan pintas.

Kode Sumber pendesainan border Top, Right, Bottom, dan Left.

Dan seperti inilah hasilnya :

desain border dengan css

Border Color

Sesuai namanya, anda dapat memberi warna pada border sesuai dengan keinginan anda. Warna yang di setting dapat berdasarkan dari nilai warnanya RGB (255,255,255), HEX (#FFFFFF), atau nama warnanya (Fuchsia / Blue / Yellow).

Kode Sumber…

Dan berikut hasilnya :

border color pada css

Pada contoh di atas saya membuat border berwarna pada ke 4 sisinya. Anda juga dapat mewarnai seluruh border sekaligus dalam 1 warna. Anda dapat menggunakan property border-color.

Kode Sumber…

Dan berikut hasilnya :

mendesain border

Border Collapse

Property border-collapse biasanya digunakan untuk merapihkan tampilan table. Dengan memakai property tersebut border akan hilang, sehingga border yang tampil hanya 1.

Di bawah ini kode sumbernya :

dan berikut hasilnya :

border collapse

Di bawah ini adalah tampilan border, apabila kalian tidak mengkolaps-nya…

Maka tiap cell, akan memiliki border-nya sendiri – sendiri…

border

Border Radius

Dengan property border-radius, anda dapat mengatur sudut radius pada border sebuah elemen.

Kode Sumber…

Dan berikut hasilnya :

border radius

Anda pun dapat menentukan sisi mana pada bagian border yang ingin dirubah sudut radiusnya. Dengan…

  1. Border-top-right-radius
  2. Border-top-left-radius
  3. Border-bottom-right-radius
  4. Border-bottom-left-radius

Border Style

CSS menyediakan beragam style dalam pendesainan border, untuk mengetahui style – style apa saja yang ada, gunakan border-style dan mari lihat satu per satu…

Kode Sumber…

Dan berikut hasilnya :

border style


Demikian tutorial dari Cara Mengatur Border pada CSS, silahkan kunjungi tutorial CSS lainnya seperti konsep box model pada CSS, fungsi padding dalam mendesain letak elemen, dan fungsi dari margin.

Leave a comment

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

One thought on “Cara Mengatur Border pada CSS”

× Contact Us