Tutorial CSS Untuk Pemula - Belajar Menggunakan Property Border Pada CSS
Pada tutorial kali ini kita akan membahas tentang sebuah properti yang terdapat pada CSS yang berfungsi untuk memberikan dan mengatur border pada sebuah Tag atau Element HTML.
Bicara tentang border, biasanya border itu merupakan bagian dari sebuah tabel, sehingga ketika kita ingin membuat sebuah border untuk sebuah tulisan pada file HTML maka biasanya kita akan membuat tabel terlebih dahulu dengan menuliskan kode seperti ini :
<table border="2">
<tr>
<td>Ini adalah tulisan didalam tabel</td>
</tr>
</table>
Sehingga hasilnya jadi seperti ini :
| Ini adalah tulisan didalam tabel |
Dengan CSS kita tidak perlu bersusah payah lagi untuk menuliskan kode tabel seperti di atas karena kita hanya perlu menggunakan salah satu properti yang terdapat pada property border yang berfungsi untuk memberikan border pada tulisan ataupun gambar yang kita kehendaki yang terdapat pada website kita, yaitu property border-style.
Selain property border-style, terdapat juga property lain yang berfungsi mengatur border yang kita buat, yaitu border-color dan border-width.
Agar tidak semakin penasaran, mari kita langsung saja ke pembahasan.
Tapi sebelumnya silahkan anda buat sebuah folder di desktop anda dengan nama belajar_property_border_css sebagai tempat untuk menyimpan file akan akan kita buat nanti in sya aLLAH dan jangan lupa untuk memastikan teks editor dan browser anda bisa berfungsi dengan baik.
Macam-Macam Property Border Dan Nilai Yang Bisa Digunakan Padanya
BORDER STYLE
Property border-style berfungsi untuk membuat border pada tulisan atau gambar yang kita kehendaki.
Property boder-style ini memiliki beberapa macam nilai yang merupakan bentuk dari border yang akan digunakan.
Jadi kita bisa memilih untuk menggunakan model border yang seperti apa yang ingin kita gunakan.
Berikut ini adalah nilai-nilai yang bisa digunakan pada property border-style :
- solid : berfungsi memberikan border dengan model garis penuh / solid.
contoh penulisan kode :
border-style: solid;- dashed : berfungsi memberikan border dengan model garis putus-putus.
contoh penulisan kode :
border-style: dashed;- dotted : berfungsi memberikan border dengan model titik-titik.
contoh penulisan kode :
border-style: dotted;- double : berfungsi memberikan dua buah border dengan model garis penuh.
contoh penulisan kode :
border-style: double;- none : berfungsi menghilangkan atau menonaktifkan border.
contoh penulisan kode :
border-style: none;- hidden : berfungsi menyembunyikan border.
contoh penulisan kode :
border-style: hidden;Setelah kita mengetahui nilai-nilai border-style diatas, maka sekarang waktunya bagi kita untuk mempraktekkannya.
Langsung saja buka teks editor anda (buat file baru) lalu ketikan atu copy-paste kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Mmebuat Border Dengan CSS</title>
<style type="text/css">
h1{
text-align: center;
}
.solid{
border-style: solid;
}
.dashed{
border-style: dashed;
}
.dotted{
border-style: dotted;
}
.double{
border-style: double;
}
.none{
border-style: none;
}
.hidden{
border-style: hidden;
}
</style>
</head>
<body>
<h1 class="solid"> INI ADALAH CONTOH PENGGUNAAN BORDER SOLID PADA TEKS </h1>
<h1 class="dashed"> INI ADALAH CONTOH PENGGUNAAN BORDER DASHED PADA TEKS </h1>
<h1 class="dotted"> INI ADALAH CONTOH PENGGUNAAN BORDER DOTTED PADA TEKS </h1>
<h1 class="double"> INI ADALAH CONTOH PENGGUNAAN BORDER DOUBLE PADA TEKS </h1>
<h1 class="none"> INI ADALAH CONTOH PENGGUNAAN BORDER NONE PADA TEKS </h1>
<h1 class="hidden"> INI ADALAH CONTOH PENGGUNAAN BORDER HIDDEN PADA TEKS </h1>
</body>
</html>
Kemudian Simpan dengan nama border_css.html di dalam folder belajar_property_border_css lalu jalankan di browser anda maka hasilnya kira-kira seperti ini :
BORDER WIDTH
Properti border-width berfungsi untuk mengatur ketebalan border.
Ada beberapa nilai yang bisa digunakan pada properti border-width ini, diantaranya yaitu :
- medium : berfungsi untuk memberikan ukuran secara default
contoh penulisan kode :
border-width: medium;- thin : berfungsi untuk memberikan ukuran border tipis.
- contoh penulisan kode :
border-width: thin;- thick : berfungsi untuk memberikan ukuran poster tebal.
contoh penulisan kode :
border-width: thick;- ukuran : yaitu mengatur ukuran sesuai dengan keinginan kita yang diakhiri dengan satuan tertentu.
contoh penulisan kode :
border-width: 50px;Agar bisa mengetahui hasil dari penerapan property border-width ini maka mari kita coba dengan membuat sebuah file html baru.
Silakan buka kembali teks editor anda (buat file baru) lalu ketikkan atau copy-paste kode dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Mmebuat Border Dengan CSS</title>
<style type="text/css">
h1{
text-align: center;
}
.medium{
border-style: solid;
border-width: medium;
}
.thin{
border-style: solid;
border-width: thin;
}
.thick{
border-style: solid;
border-width: thick;
}
.ukuran{
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<h1 class="medium"> INI ADALAH CONTOH PENGGUNAAN BORDER SOLID-MEDUIM PADA TEKS </h1>
<h1 class="thin"> INI ADALAH CONTOH PENGGUNAAN BORDER SOLID-THIN PADA TEKS </h1>
<h1 class="thick"> INI ADALAH CONTOH PENGGUNAAN BORDER SOLID-THICK PADA TEKS </h1>
<h1 class="ukuran"> INI ADALAH CONTOH PENGGUNAAN BORDER SOLID-UKURAN 20px PADA TEKS </h1>
</body>
</html>
Kemudian simpan di dalam folder belajar_property_border_css dengan nama border_width.html lalu jalankan file tersebut di browser anda maka hasilnya kira-kira akan seperti ini :
BORDER COLOR
Properti border-color berfungsi untuk memberikan warna pada border yang kita buat
Nilai yang bisa digunakan pada properti border-color ini yaitu dengan menggunakan :
- nama warna : seperti red, green, blue dan seterusnya.
- kode hex : seperti #ff0000, #00ff00, #0000ff dan seterusnya.
- kode RGB : seperti rgb(255,0,0) , rgb(0,255,0) , rgb(0,0,255)dan seterusnya
- transparent
Contoh penulisan kode nya adalah sebagai berikut :
border-color: red;Untuk melihat hasil dari penggunaan property border-color diatas mari kita coba praktekkan dengan membuat sebuah file HTML baru.
Silahkan buka kembali teks editor anda (buat file baru) kemudian ketikkan atau copy-paste kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Mmebuat Border Dengan CSS</title>
<style type="text/css">
h1{
text-align: center;
}
.solid{
border-style: solid;
border-width: 15px;
border-color: red;
}
.dashed{
border-style: dashed;
border-width: 15px;
border-color: #00ff00;
}
.dotted{
border-style: dotted;
border-width: 15px;
border-color: rgb(0,0,255);
}
</style>
</head>
<body>
<h1 class="solid"> INI ADALAH CONTOH PENGGUNAAN BORDER SOLID BERWARNA PADA TEKS </h1>
<h1 class="dashed"> INI ADALAH CONTOH PENGGUNAAN BORDER DASHED BERWARNA PADA TEKS </h1>
<h1 class="dotted"> INI ADALAH CONTOH PENGGUNAAN BORDER DOTTED BERWARNA PADA TEKS </h1>
</body>
</html>
Kemudian simpan di dalam folder belajar_property_border_css dengan nama border_color.html lalu jalankan file tersebut di browser anda maka hasilnya kira-kira akan seperti ini :
Sebagaimana pada kode diatas, dalam penggunaannya property border-color ini harus digunakan bersama properti border-style.
Kenapa ?
Karena jika tidak menggunakan properti border-style, itu berarti tidak ada border, dan jika tidak ada border lalu apa yang akan diberi warna?
Kecuali jika kita menggunakannya pada Tag atau Element HTML yang memiliki attribut border, maka property tersebut bisa digunakan padanya, in sya aLLAH.
BORDER 3D
Selain nilai diatas, ada beberapa nilai lain yang berfungsi untuk memberikan border berupa border 3D, yaitu :
- groove
- inset
- outset
- ridge
untuk melihat hasil dari penggunaan nilai diatas kita harus menggunakan border yang agak tebal dan juga harus memberikan warna pada border tersebut.
silahkan ketikkan atau copy-paste kode dibawah ini kedalam teks editor anda (buat file baru) :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Mmebuat Border Dengan CSS</title>
<style type="text/css">
h1{
text-align: center;
}
.groove{
border-style: groove;
border-width: 25px;
border-color: red;
}
.inset{
border-style: inset;
border-width: 25px;
border-color: #00ff00;
}
.outset{
border-style: outset;
border-width: 25px;
border-color: rgb(0,0,255);
}
.ridge{
border-style: ridge;
border-width: 25px;
border-color: rgb(255,0,255);
}
</style>
</head>
<body>
<h1 class="groove"> INI ADALAH CONTOH PENGGUNAAN BORDER GROOVE PADA TEKS </h1>
<h1 class="inset"> INI ADALAH CONTOH PENGGUNAAN BORDER INSET PADA TEKS </h1>
<h1 class="outset"> INI ADALAH CONTOH PENGGUNAAN BORDER OUSET PADA TEKS </h1>
<h1 class="ridge"> INI ADALAH CONTOH PENGGUNAAN BORDER RIDGE PADA TEKS </h1>
</body>
</html>
Kemudian simpan di dalam folder belajar_property_border_css dengan nama border_3D.html lalu jalankan file tersebut di browser anda maka hasilnya kira-kira akan seperti ini :
MENYINGKAT PENULISAN KODE
Kita bisa menyingkat penulisan kode dalam penggunaan ketiga property border diatas. Misal kode yang kita tulis adalah seperti ini :
border-style: outset;
border-width: 25px;
border-color: rgb(0,0,255);Maka kita bisa menyingkatnya menjadi seperti ini :
border: outset 25px rgb(0,0,255);Nah itulah macam-macam property border pada CSS beserta nilainya dan juga cara menggunakannya.
Alhamdulillah, bertambah lagi pengetahuan kita tentang CSS ini.
Bagaimana penjelasan diatas? sangat mudah untuk dipahami bukan?
Sekarang anda sudah mengerti bagaimana cara membuat border dan anda bisa memilih yang anda sukai dan mengaturnya sesuka anda dengan kode CSS.
Semakin kita tahu, maka semakin seru.
Selanjutnya kita akan belajar apa?
in sya aLLAH selanjutnya kita akan belajar tentang Cara Menggunakan Property Margin Dan Padding Pada CSS.
Apa margin? dan apa itu padding?
Penasaran? Langsung saja klik --> Cara Menggunakan Property Margin Dan Padding Pada CSS
Semoga bermanfaat.