Belajar CSS Part 9 : Mengatur Border Dengan CSS

BELAJAR CSS MENGATUR BORDER

Border/garis tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal. Border properti mendefinisikan width, color, and style dari batas area pada box/kotak.Pada tutorial kali ini kita akan belajar tentang Border pada CSS.

Untuk contoh penggunaanya silahkan simak penjelasandibawah,

CSS memberi Anda pilihan dalam menggunakan border antara lain :

border-style
border-width
border-color
border-individual

MENGATUR BORDER STYLE

Pada CSS terdapat banyak gaya untuk mengatur border, kita dapat membuat gaya garis putus - putus, garis tebal dan masih banyak lainya. Untuk memberikan border sekaligus value style yang kita inginkan kita dapat menggunakan properti CSS border-style . Perhatikan contoh dibawah

index.html


<!DOCTYPE html>
<html>
<head>
    <title>Border Style CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="garis_1">Garis dengan gaya solid</p>
    <p id="garis_2">Garis dengan gaya dotted</p>
    <p id="garis_3">Garis dengan gaya dashed</p>
    <p id="garis_4">Garis dengan gaya double</p>
    <p id="garis_5">Garis dengan gaya groove</p>
    <p id="garis_6">Garis dengan gaya inset</p>
    <p id="garis_7">Garis dengan gaya outset</p>
    <p id="garis_8">Garis dengan gaya ridge</p>
</body>
</html>

style.css

#garis_1{
    border-style:solid;
}
#garis_2{
    border-style: dotted;
}
#garis_3{
    border-style: dashed;
}
#garis_4{
    border-style: double;
}
#garis_5{
    border-style: groove;
}
#garis_6{
    border-style: inset;
}
#garis_7{
    border-style: outset;
}
#garis_8{    border-style: ridge;
}

Hasilnya seperti ini

Dapat kia lihat gaya border apa saja yang ada di CSS dan tampilanya seperti apa. Setiap value memiliki hasil yang berbeda, Solid agar Border menjadi tebal, dotted agar border menjadi garis putus - putus dan yang lain bisa sobat lihat sendiri.

MENGATUR UKURAN BORDER CSS

Untuk mengatur ukuran border kita dapat menggunakan properti CSS border-width. Berikut contoh penulisan properti border-width

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Border Style CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="garis_1">Garis dengan gaya solid</p>
    <p id="garis_2">Garis dengan gaya dotted</p>
    <p id="garis_3">Garis dengan gaya dashed</p>
    <p id="garis_4">Garis dengan gaya double</p>
    <p id="garis_5">Garis dengan gaya groove</p>
    <p id="garis_6">Garis dengan gaya inset</p>
    <p id="garis_7">Garis dengan gaya outset</p>
    <p id="garis_8">Garis dengan gaya ridge</p>
</body>
</html>

style.css

#garis_1{
    border-style:solid;
    border-width: 5px;
}
#garis_2{
    border-style: dotted;
    border-width: 10px;
}
#garis_3{
    border-style: dashed;
    border-width: 3px;
}
#garis_4{
    border-style: double;
    border-width: 9px;
}
#garis_5{
    border-style: groove;
    border-width: 25px;
}
#garis_6{
    border-style: inset;
    border-width: 5px;
}
#garis_7{
    border-style: outset;
    border-width: 5px;
}
#garis_8{
    border-style: ridge;
    border-width: 50px;
}

Dapat kita lihat ukuran border berubah sesuai besar pixel yang kita berikan

MEMBERI WARNA PADA BORDER
Untuk memberikan warna pada border kita dapat menggunakan properti CSS border-color . Berikut adalah contoh penulisan properti border-color

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Border Style CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="garis_1">Garis dengan gaya solid</p>
    <p id="garis_2">Garis dengan gaya dotted</p>
    <p id="garis_3">Garis dengan gaya dashed</p>
    <p id="garis_4">Garis dengan gaya double</p>
    <p id="garis_5">Garis dengan gaya groove</p>
    <p id="garis_6">Garis dengan gaya inset</p>
    <p id="garis_7">Garis dengan gaya outset</p>
    <p id="garis_8">Garis dengan gaya ridge</p>
</body>
</html>

style.css

#garis_1{
    border-style:solid;
    border-width: 5px;
}
#garis_2{
    border-style: dotted;
    border-width: 10px;
    border-color:red;
}
#garis_3{
    border-style: dashed;
    border-width: 3px;
    border-color:blue;
}
#garis_4{
    border-style: double;
    border-width: 9px;
    border-color:green;
}
#garis_5{
    border-style: groove;
    border-width: 25px;
    border-color:#12ff00;
}
#garis_6{
    border-style: inset;
    border-width: 5px;
    border-color:#333333;
}
#garis_7{
    border-style: outset;
    border-width: 5px;
    border-color:yellow;
}
#garis_8{
    border-style: ridge;
    border-width: 50px;
    border-color: violet;
}

CARA CEPAT MEMANIPULASI BORDER DENGAN CSS
Cara untuk memanipulasi atau mengubah border dengan cepat menggunakan CSS kita bisa langsung menggunakan property css border. dan mengisi langsung value ukuran, jenis garis dan warna. untuk cara cepat memanipulasi border dengan css silahkan perhatikan contoh berikut ini.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Border style CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="garis_1">Garis dengan gaya solid</p>
    <p id="garis_2">Garis dengan gaya dotted</p>   
    <p id="garis_3">Garis dengan gaya dotted</p>
</body>
</html>

style.css

#garis_1{
    border:1px solid blue;
}
#garis_2{
    border:10px dotted green;
}    
#garis_3{
    border:30px dashed pink;
}

Perhatikan pada contoh diatas. Untuk mengubah border dengan cepat dapat langsung menyisipkan jenis ukuran, jenis border dan warna yang diinginkan dalam properti border.

#garis_1{
border:1px solid blue;

Contoh diatas berarti ukuran border 1px, jenis border solid, dan warnanya adalah blue / biru. Teknik ini dinamakan teknik shorthand. Dan jika kita run dalam web browser berikut hasilnya

KESIMPULAN
Sekarang kita sudah mengerti bagaimana cara membuat border dengan css, cukup mudah bukan? Biasakan untuk selalu menggunakan teknik shorthand karena teknik ini memiliki kelebihan yaitu keringkasan dalam mengetik skrip dan ukuran file CSS yang dihasilkan juga semakin kecil sehingga akan meningkatkan kecepatan loading web kita.

Referensi : Malas Ngoding

TUTORIAL CSS LAINYA