Membuat Border Css

Tanggal : 12 Sep 2018, Category : Belajar CSS, Create By : admin

Hai brow, selamat datang kembali di wesbite gudang ilmu aplikasi, setelah kemarin kita membahas cara membuat background gradient dengan css, materi selanjutnya yang akan kita bahas adalah membuat border dengan menggunakan css, border atau garis tepi di dalam css memiliki beberapa tampilan dari mulai hanya garis, titik, dua garis dll.

Biasanya dalam mendesign suatu template wesbsite border sering di pake sebagai batas atau garis tipis yang di gunakan sebagai pembatas antara element satu dengan element lainya, agar dalam menghubungkan element ke element lainya lebih menarik, sesuai dengan fungsi css sendiri yaitu untuk mempercantik tampilan wesbite.

Oke langsung saja kita menuju contoh scriptnya, di contoh script css dibawah ini kami akan menampilkan semua jenis border yang tersedia di dalam value border.

Contoh Script:

<style>
.medium {
border:medium 2px;
}
.thin {
border:thin 2px;
}
.thick {
border:thick 2px;
}
.dashed {
border:dashed 2px;
}
.dotted {
border:dotted 2px;
}
.double {
border:double 2px;
}
.groove {
border:groove 2px;
}
.hidden {
border:hidden 2px;
}
.inset {
border:inset 2px;
}
.none {
border:none 2px;
}
.outset {
border:outset 2px;
}
.ridge {
border:ridge 2px;
}
.solid {
border:solid 2px;
}
</style>

<p class="medium"> border:medium </p>
<p class="thin"> border:thin </p>
<p class="thick"> border:thick </p>
<p class="dashed"> border:dashed </p>
<p class="dotted"> border:dotted </p>
<p class="double"> border:double </p>
<p class="groove"> border:groove </p>
<p class="hidden"> border:hidden </p>
<p class="inset"> border:inset </p>
<p class="none"> border:none </p>
<p class="outset"> border:outset </p>
<p class="ridge"> border:ridge </p>
<p class="solid"> border:solid </p>

Hasil :

 

Dari Script di atas akan menghasilkan output, mungkin ada value border yang tidak kelihatan garisnya, anda tinggal memilih border yang sesuai denga kebutuhan design template anda, dari properti border tidak hanya memiliki value jenis bordernya anda juga bisa memberi warna dan ketebalan dari border tersebut, kami akan menberi contoh penggunaan warna dalam border.

Contoh Script:

<style>
.solid {
border:solid 2px #F00;
}
</style>

Pemnambahan value warna #F00 oautput yang di hasilkan

Contoh Scipt dengan perbedaan jenis border di masing - masing sisi

<style>
.solid {
border-left:solid 2px;
border-right:double 2px;
border-top:dotted 2px;
border-bottom:inset 2px;
width:500px;
}
</style>

Output :


Keyword:
  • membuat border css
  • membuat border dengan css
  • css border
  • border css
  • border atas css
  • border bawah css
  • border kiri css
  • border kanan css

Artikel Lain

Pengertian Sql Dan Jenis Perintah Sql

Date : 13 Sep 2018, Category : Database, Create By : admin

Hai brow, bagi kalian yang sudah lama berkecimpung di dunia pemprograman website pasti tidak asing dengan SQL, tetapi jika kalian baru mau masuk kedalam dunia pemprograman anda harus memahami apa .....

Cara Agar Tanda Petik Bisa Tersimpan Di Database

Date : 09 Jan 2019, Category : Tutorial, Create By : admin

Selamat datang di gudang ilmu aplikasi, kali ini kami akan membahas cara agar tanda petik bisa tersimpan di database, pasti bagi anda yang pernah membuat aplikasi pernah mengalami error ketika .....

Mengenal Fungsi Implode Php

Date : 04 Jan 2019, Category : Tutorial, Create By : admin

Selamat datang di gudang ilmu aplikasi, setelah kita membahas mengenai explode di artikel sebelumya kini kita akan membahas mengenai implode. Fungsi implode adalah fungsi kebalikanya dari fungsi explode, jika explode .....