Dalam tutorial kali ini kita akan membahas tentang bagaimana menggunakan border di CSS, pada tutorial sebelumnya kita membahas tentang penggunaan padding, property border digunakan untuk memberikan garis pinggir pada elemen, setidaknya ada tiga property yang harus anda set, yaitu color, style dan width

Namun anda jug adapat menggunakan CSS shorthand sehingga menjadi seperti berikut ini

Border : 5px solid black;

Cobalah kode berikut ini

 

sama halnya dengan padding, penambahan property border juga akan merubah ukuran dari box, jadi seperti yang saya jelaskan sebelumnya, ketika anda ingin membuat ukuran  lebar box tetap 100px maka anda harus menghitung ulang width dari box tersebut

Kali ini perhatikan bahwa kita memberikan border pada seluruh sisi .box, artinya jika kita tentukan ukuran border sebesar 5px, maka 10px (untuk width, karena 5px untuk left, dan 5px untuk right) akan ditambahkan pada ukuran .box tersebut. Sehingga ukuran .box berubah kembali menjadi 110px.

Untuk itu kita kurangi width dari .box tersebut menjadi 70px sehingga : 70px (width) + 20px (padding) + 10px (border) = 100px.

Semoga tutorialnya bermanfaat yah, sampai bertemu di tutorial selanjutnya semoga tutorial ini dapat berguna