Border ~ Pemrograman dan Teknologi

Selain latar belakang, kita juga bisa memberi garis batas atau border pada area yang jadi bagian suatu tag. Properti border bisa diberi beberapa nilai sekaligus untuk warna, jenis dan ketebalannya. Selain itu, kita juga bisa menggunakan properti yang dikhususkan untuk mengatur sebagian nilai saja dari properti border. Berikut ini adalah properti-properti CSS yang berkaitan dengan border.

border => Atur semua properti border dalam satu deklarasi
border-bottom => Atur semua semua properti border bagian bawah dalam satu deklarasi
border-bottom-color => Atur warna dari border bagian bawah
border-bottom-style => Atur bentuk dari border bagian bawah
border-bottom-width => Atur lebar dari border bagian bawah
border-color => Atur warna dari 4 border
border-left => Atur semua properti border bagian kiri dalam satu deklarasi
border-left-color => Atur warna dari border bagian kiri
border-left-style => Atur bentuk dari border bagian kiri
border-left-width => Atur lebar dari border bagian kiri
border-right => Atur semua properti border bagian kanan dalam satu deklarasi
border-right-color => Atur warna dari border bagian kanan
border-right-style => Atur bentuk dari border bagian kanan
border-right-width => Atur lebar dari border bagian kanan
border-style => Atur bentuk dari 4 border
border-top => Atur semua properti border bagian atas dalam satu deklarasi
border-top-color => Atur warna dari border bagian atas
border-top-style => Atur bentuk dari border bagian atas
border-top-width => Atur lebar dari border bagian atas
border-width => Atur lebar dari 4 border

Border adalah properti singkat yang berisi jenis, warna, dan ukuran border. Properti yang lebih spesifik untuk warna adalah border-color. Jenis border bisa kalian tentukan dengan border-style. Ketebalannya bisa kalian tentukan dengan border-width. Properti-properti yang sudah saya sebutkan berlaku untuk keempat sisi "kontainer" atau elemen HTML. Kalau kalian ingin mengubah border secara spesifik, gunakan properti yang namanya ada left, right, bottom, dan top di dalamnya. Berikut ini contoh penggunaannya dalam CSS.

.styleku div{
	background : yellow;
}

.styleku1{
    border-color : blue;
    border-style : dashed;
    border-width : 2px;
}

.styleku2{
    border : red double 4px;
}

.styleku3{
    border-left-style : hidden;
    border-right-style : none;
    border-top-style : dotted;
    border-bottom-style : solid;
}

Kalian bisa menggunakan kode HTML di bawah ini. Kalian juga bisa menggunakan kode HTML yang kalian ketik sendiri asal ada nama-nama kelas di atas. Namai file CSS-nya dengan "cssku.css" kalau kalian menggunakan kode HTML di bawah ini.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
<h2>Judul</h2>
<Div class = "styleku">
    <div class="styleku1">
        <p>ini paragraf 1</p>
        <p>ini paragraf 2</p>
        <p>ini paragraf 3</p>
    </div><br>
    <div class="styleku2">
        <p>ini paragraf 4</p>
        <p>ini paragraf 5</p>
        <p>ini paragraf 6</p>
    </div><br>
    <div class="styleku3">
        <p>ini paragraf 7</p>
        <p>ini paragraf 8</p>
        <p>ini paragraf 9</p>
    </div>
</div>
</BODY>
</HTML>

Style border-width bisa diberi nilai angka. Kalian bisa menggunakan satuan pixel, cm, dan satuan lainnya seperti properti lain yang nilainya menggunakan angka.

Properti border-color bisa diberi warna dengan nilai hexadesimal, RGB atau HSL. Properti-properti tersebut bisa juga diberi nilai initial dan parent.

Border-Style

Untuk style border, ada beberapa style border yg bisa digunakan sebagai nilai border-style, border-right-style, border-left-style dan kelompoknya. Jenis-jenis style tersebut adalah :

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden