MENGATUR BORDER DAN OUTLINE WEBSITE PADA CSS

Border merupakan garis batas yang dapat digunakan di setiap elemen. Pada halaman web, sering kali ada garis yang mengelilinginya. Garis tersebut adalah border Border pada CSS digunakan untuk memberikan garis pada elemen HTML.

Macam-macam style garis dengan properti border-style, Border sering digunakan pada design web untuk memberikan perbatasan pada layout. border digunakan untuk mengatur ketebalan dengan properti border-width dan memberikan warna pada border itu sendiri dengan properti border-color.

A. Border-style

Properti border-style digunakannya untuk menentukan style atau gaya manakah yang akan Anda gunakan untuk memberikan efek visual garis atau pun perbatasan. Berikut list border-style yang bisa Anda gunakan:

• dotted – Memberikan gaya border bertitik
• dashed – Memberikan gaya border putus-putus
• solid – Memberikan gaya border yang solid atau bergaris
• double – Memberikan gaya border ganda
• groove– Memberikan gaya border alur 3D. Efeknya tergantung pada nilai border-color
• ridge– Memberikan gaya border bergerigi 3D. Efeknya tergantung pada nilai border-color
• inset– Memberikan gaya border inset 3D. Efeknya tergantung pada nilai border-color
• outset– Memberikan gaya border awal 3D. Efeknya tergantung pada nilai border-color
• none – Tidak mendefinisikan border apapun
• hidden – Menentukan border yang tersembunyi

Properti dasar border

• Style adalah langkah wajib dalam mendefinisikan border. Tanpa menentukan style, border tidak akan muncul. Ada beberapa pilihan style yang bisa digunakan, seperti solid, dashed, atau dotted.
• Color adalah elemen yang menambah “keindahan” pada border. Dengan properti border-color, kamu bisa menentukan warna untuk semua sisi atau untuk setiap sisi secara terpisah. 
• Width menentukan ketebalan garis border. Kamu bisa menggunakan value seperti thin, medium, atau thick. Tak hanya itu, kamu juga bisa menentukan sendiri ketebalannya dalam satuan seperti px, em, atau rem.

B. Border-width

Dengan properti border-width Anda bisa menggunakannya untuk memberikan ukuran ketebalan atau lebar pada border, dan properti border width sendiri dapat memiliki satu sampai empat nilai yaitu:

border-top-width, border-right-width, border-bottom-width dan border-left-width

Width atau lebar dapat ditetapkan sebagai ukuran (px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: thin, medium dan thick.

#p1 {
    border-style: solid;
    border-width: 7px;
}
#p2 {
    border-style: solid;
    border-width: medium;
}
#p3 {
    border-style: solid;
    border-width: 1px;
}

C. Border-color

Dengan properti border-color Anda bisa menggunakannya untuk menentukan color atau warna manakah yang akan digunakan, jika Anda tidak memberikan warna atau color pada border, maka secara otomatis akan mewarisi color dari elemen induknya. Properti border color sendiri dapat memiliki satu sampai empat nilai yaitu:

border-top-color, border-right-color, border-bottom-color dan border-left-color

Border color dapat diatur oleh nilai:

• nama – tentukan nilai color nama, seperti red
• Hex – tentukan nilai color hex, seperti #ff0000
• RGB – tentukan nilai color RGB, seperti rgb (255,0,0)
• transparan
• dll

#p1 {
    border-style: solid;
    border-width: 2px;
    border-color: green;
}
#p2 {
    border-style: solid;
    border-width: 4px;
    border-color: blue;
}
#p3 {
    border-style: solid;
    border-width: 6px;
    border-color: red green blue orange;
}

D. Border individu

Anda bisa mengatur border lebih spesifik atau mendetail dengan menggunakan istilah border individu. Yang dimaksud dengan border individu sendiri, Anda bisa mengatur menentukan setiap sudut untuk memberikan border atau perbatasan. Berikut list properti border individu:

• border-top-# ( atas )
• border-right-# ( kanan )
• border-bottom-# ( bawah )
• border-left-# ( kiri )

p {
    border-top-width: 2px;
    border-right-width: 4px;
    border-bottom-width: 6px;
    border-left-width: 8px;
    border-top-style: dotted;
    border-right-style: dashed;
    border-bottom-style: solid;
    border-left-style: double;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: red;
    border-left-color: black;
}

Hasilnya akan sama

p {
    border-style: dotted solid;
    border-width: 2px 4px 6px 8px;
    border-color: blue green red black;
}

E. Border shorthand

Dengan border shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti border dalam satu properti tunggal.

Untuk menggunakan border shorthand Anda cukup menggunakan properti border. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti menggunakan border individu.

Properti border shorthand berlaku untuk border dibawah ini:

• border-width
• border-style ( dibutuhkan )
• border-color

p {
    border: 5px solid blue;
}

F. Border-radius

Properti border-radius digunakan untuk membuat border atau perbatasan yang bulat. Agar Anda bisa melihat effek visual border-radius, sangat disarankan agar memberikan background-color atau border pada elemennya, ini tidak wajib, ini supaya Anda bisa melihat effek perbatasan yang bulat.

p {
    border: 3px solid green;
}
#p1 {
    border-radius: 5px 10px 15px 20px;
}
#p2 {
    border-radius: 5px 15px 20px;
}
#p3 {
    border-radius: 5px 20px;
}
#p4 {
    border-radius: 5px;
}