Belajar CSS Part 7: Cara Mengubah Border Dengan CSS


Belajar CSS Part 7: Cara Mengubah Border Dengan CSS 1

IRVAN GEN – Selamat datang. Salam jumpa kembali di pertemuan yang ke-7 dalam sesi belajar CSS. Sebelumnya kita pernah membahas Memahami Position Dalam CSS. Pada pertemuan yang ke-7 saya akan mengulas Tutorial Mengubah Border.

CSS dapat kita gunakan untuk mengubah atau memanipulasi warna, ukuran, dan style border sendiri. Misalkan border yang bentuknya dengan garis titik – titik atau strip atau juga yang biasa saja.

#PROPERTI BORDER

Beberapa properti border yang dapat digunakan untuk mengatur border style CSS:

  • border-bottom : Mengatur garis yang terletak di bawah.
  • border-bottom-color : Mengatur warna garis yang terletak di bawah.
  • border-bottom-style : Mengatur style garis yang terletak di bawah.
  • border-bottom-width : Mengatur ukuran garis yang terletak di bawah.
  • border-color : Mengatur warna garis.
  • border-left : Mengatur garis yang terletak di sebelah kiri.
  • border-left-color : Mengatur warna garis yang terletak di sebelah kiri.
  • border-left-style : Mengatur style garis yang terletak di sebelah kiri.
  • border-left-width : Mengatur ukuran garis yang terletak di sebelah kiri.
  • border-right : Mengatur garis yang terletak di sebelah kanan.
  • border-right-color : Mengatur warna garis yang terletak di sebelah kanan.
  • border-right-style : Mengatur style garis yang terletak di sebelah kanan.
  • border-right-width : Mengatur ukuran garis yang terletak di sebelah kanan.
  • border-style : Mengatur style garis.
  • border-top : Mengatur garis yang terletak di sebelah atas.
  • border-top-color : Mengatur warna garis yang terletak di sebelah atas.
  • border-top-style : Mengatur style garis yang terletak di sebelah atas.
  • border-top-width : Mengatur ukuran garis yang terletak di sebelah atas.
  • border-width : Mengatur ukuran garis.

1. MENGUBAH BORDER STYLE

Di CSS ada banyak model untuk membuat border dengan style garis seperti yang saya katakan sebelumnya. Ada yang berbentuk garis titik – titik, strip, garis putus – putus dan masih banyak lagi style yang tersedia.

Untuk membuat garis serta menentukan style yang diinginkan kita bisa menggunakan properti border-style. Silahkan teman – teman perhatikan contoh kode program dibawah ini.

index.html

style.css

Buat ke-2 file itu dan simpan didalam satu folder, kemudian jalankan file index.html.

mengubah border style css - #irvangen
mengubah border style css – #irvangen

2. MENGATUR UKURAN BORDER CSS

Untuk memberi ukuran pada border kamu bisa menggunakan properti border-width. Misalkan, border yang diatas terlalu kecil, nah tentu ini bisa kita ubah dengan properti tersebut.

Silahkan perhatikan kode program dibawah ini.

index.html

style.css

Hasilnya…

mengatur ukuran border style css - #irvangen
mengatur ukuran border style css – #irvangen

3. MEMBERI WARNA BORDER

Cara memberi warna pada garis border tambahkan properti border-color pada style.css. Contoh penulisannya seperti dibawah ini.

index.html

style.css

Hasilnya…

cara memberi warna pada border style css - #irvangen
cara memberi warna pada border style css – #irvangen

#CARA MANIPULASI BORDER DENGAN CSS

Untuk memanipulasi border dengan cepat kita bisa langsung menggunakan properti css border dan mengisi value ukuran, warna dan jenis garis.

Silahkan perhatikan lagi contoh penulisan dan kode programnya dibawah ini.

index.html

style.css

Contoh syntax diatas untuk mengubah border dengan cepat dan praktis, kamu bisa langsung memasukan ukuran, jenis border dan memberi warna yang teman – teman inginkan.

tepatnya dibagian ini.

Saya mengubah border tersebut dengan ukuran 1px, jenis bordernya solid dan memberi warna biru. Hasilnya…

cara manipulasi border dengan cepat - #irvangen
cara manipulasi border dengan cepat – #irvangen

Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang Border Pada CSS. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.


Income Search

  • cara mengubah ukuran border css
  • cara ngecilin border di php
  • membuat garis putus putus di css
  • border pada css
  • belajar border css
  • cara ubah warna border di css
  • contoh Penggunaan Border Calor Pada html
  • cara membuat border css
  • jenis border

Nilai kualitas konten


Irvan Nurfazri
Fakir ilmu yang selalu berusaha memantaskan diri dihadapan-Nya.Menulis apa yang saya sukai dan berbagi apa yang saya ketahui.

0 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *