Cara Membuat Border dengan CSS

Kadang sebagai seorang desainer, kita membutuhkan semacam border atau garis pinggir pada sebuah objek kotak tersebut untuk memperindah tampilan kotak. Dan beruntungnya, saat ini CSS3 sudah menyediakan berbagai tipe border, dan border radius yang bisa digunakan, termasuk manipulasinya.

Sebagai contohnya, kita akan mencoba membuat sebuah objek dengan layout border garis putus-putus berukuran 2 piksel. Border tersebut kita buat warna hitam. Lalu bagaimana membuatnya. Silahkan tuliskan script di bawah ini pada file HTML dengan Notepad atau Text Editor yang lain :

<div class="box">Ini adalah text</div>

Dan silahkan tambahkan script CSS di bawah ini pada file CSS kita.

.box {
        width: 100px;
        background: red;
        margin: 10px;
        padding: 20px;
        border: 2px dotted black;
}

Setelah itu, simpan dan jalankan pada web browser. Maka hasilnya akan seperti di bawah ini :



Dibawah ini adalah macam-macam property dari border :

Property	Keterangan
border-width	Di gunakan untuk menentukan seberapa tebal border, jika dikosongkan maka valuenya akan medium
border-style	Di gunakan untuk mementukan style dari border, jika kosong maka valuenya none
border-color	Di gunakan untuk mengatur warna dari border

Sedangkan dibawah ini adalah style dari border :

border-style:dotted;

border-style:dashed;

border-style:double;

border-style:groove;

border-style:none;

border-style:outset;

border-style:ridge;

border-style:solid;

• Tweet
• Share
• Share
• Share
• Share

About Badri Zaki

hi saya Badri Zaki &, saya seorang Web Developer. Saya suka belajar semua yang berhubungan dengan Coding.

Related Post