Belajar css seputar border

belajar css

Kegunaan border

Border pada CSS digunakan untuk memberikan garis pada elemen HTML. Anda bisa memilih macam-macam style garis dengan property border-style, bisa juga mengatur ketebalan dengan property border-width dan memberikan warna pada border itu sendiri dengan property border-color. Border sering digunakan pada design web untuk memberikan perbatasan pada layout.

Border style

Dengan property border-style Anda bisa menentukan style atau gaya manakah yang akan Anda gunakan untuk memberikan efek visual garis atau pun perbatasan. Berikut list border-style yang bisa Anda gunakan:

  • dotted – Memberikan gaya border bertitik
  • dashed – Memberikan gaya border putus-putus
  • solid – Memberikan gaya border yang solid atau bergaris
  • double – Memberikan gaya border ganda
  • groove– Memberikan gaya border alur 3D. Efeknya tergantung pada nilai border-color
  • ridge– Memberikan gaya border bergerigi 3D. Efeknya tergantung pada nilai border-color
  • inset– Memberikan gaya border inset 3D. Efeknya tergantung pada nilai border-color
  • outset– Memberikan gaya border awal 3D. Efeknya tergantung pada nilai border-color
  • none – Tidak mendefinisikan border apapun
  • hidden – Menentukan border yang tersembunyi

Berikut visual hasilnya:

Border dotted

Border dashed

Border solid

Border double

Border groove

Border ridge

Border inset

Border outset

Border none


Dengan property border-style Anda dapat memiliki satu sampai empat nilai yaitu:

border-top-style, border-right-style, border-bottom-style dan border-left-style

Border width

Dengan property border-width Anda bisa memberikan ukuran ketebalan atau lebar pada border, dan property border width sendiri dapat memiliki satu sampai empat nilai yaitu:

border-top-width, border-right-width, border-bottom-width dan border-left-width

Width atau lebar dapat ditetapkan sebagai ukuran (px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: thin, medium dan thick.

Contoh:

Editor Online
  1. #p1 {
  2. border-style: solid;
  3. border-width: 7px;
  4. }
  5. #p2 {
  6. border-style: solid;
  7. border-width: medium;
  8. }
  9. #p3 {
  10. border-style: solid;
  11. border-width: 1px;
  12. }

Border color

Dengan property border-color Anda bisa menentukan color atau warna manakah yang akan digunakan, jika Anda tidak memberikan warna atau color pada border, maka secara otomatis akan mewarisi color dari elemen induknya. Property border color sendiri dapat memiliki satu sampai empat nilai yaitu:

border-top-color, border-right-color, border-bottom-color dan border-left-color

Border color dapat diatur oleh nilai:

  • nama – tentukan nilai color nama, seperti red
  • Hex – tentukan nilai color hex, seperti #ff0000
  • RGB – tentukan nilai color RGB, seperti rgb (255,0,0)
  • transparan
  • dll

Contoh:

Editor Online
  1. #p1 {
  2. border-style: solid;
  3. border-width: 2px;
  4. border-color: green;
  5. }
  6. #p2 {
  7. border-style: solid;
  8. border-width: 4px;
  9. border-color: blue;
  10. }
  11. #p3 {
  12. border-style: solid;
  13. border-width: 6px;
  14. border-color: red green blue orange;
  15. }

Border individu

Anda bisa mengatur border lebih spesifik atau mendetail dengan menggunakan istilah border individu. Yang dimaksud dengan border individu sendiri, Anda bisa mengatur menentukan setiap sudut untuk memberikan border atau perbatasan. Berikut list property border individu:

  • border-top-# ( atas )
  • border-right-# ( kanan )
  • border-bottom-# ( bawah )
  • border-left-# ( kiri )

Tanda pagar bisa Anda isi sesuai kebutuhan property border ( width, style dan color )

Contoh:

Editor Online
  1. p {
  2. border-top-width: 2px;
  3. border-right-width: 4px;
  4. border-bottom-width: 6px;
  5. border-left-width: 8px;
  6. border-top-style: dotted;
  7. border-right-style: dashed;
  8. border-bottom-style: solid;
  9. border-left-style: double;
  10. border-top-color: blue;
  11. border-right-color: green;
  12. border-bottom-color: red;
  13. border-left-color: black;
  14. }

Contoh di atas memberikan hasil yang sama seperti ini:

Contoh:

Editor Online
  1. p {
  2. border-style: dotted solid;
  3. border-width: 2px 4px 6px 8px;
  4. border-color: blue green red black;
  5. }

Jadi, inilah cara kerjanya:

Jika property border-style memiliki empat nilai:

  • border-style: dotted solid double dashed;
    • border atas dotted
    • border kanan solid
    • border bawah double
    • border kiri dashed

Jika property border-style memiliki tiga nilai:

  • border-style: dotted solid double;
    • border atas dotted
    • border kanan dan kiri solid
    • border bawah double

Jika property border-style memiliki dua nilai:

  • border-style: dotted solid;
    • border atas dan bawah dotted
    • border kanan dan kiri solid

Jika property border-stylememiliki satu nilai:

  • border-style: dotted;
    • keempat sudut border dotted

Property border-style digunakan dalam contoh di atas. Namun, ini juga berfungsi dengan property border-width dan border-color.

Border shorthand

Dengan border shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua property border dalam satu property tunggal. Untuk menggunakan border shorthand Anda cukup menggunakan property border. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti menggunakan border individu.

Property border shorthand berlaku untuk border dibawah ini:

  • border-width
  • border-style ( dibutuhkan )
  • border-color

Contoh dibawah ini merupakan contoh penggunaan Border Shorthand atau border penyingkatan.

Contoh:

Editor Online
  1. p {
  2. border: 5px solid blue;
  3. }

Anda juga dapat menentukan semua property border individu hanya untuk satu sisi:

Contoh:

Editor Online
  1. p {
  2. background-color: #ccc;
  3. }
  4. #p1 {
  5. border-top: 5px solid blue;
  6. }
  7. #p2 {
  8. border-right: 5px solid blue;
  9. }
  10. #p3 {
  11. border-bottom: 5px solid blue;
  12. }
  13. #p4 {
  14. border-left: 5px solid blue;
  15. }

Border radius

Property border-radius digunakan untuk membuat border atau perbatasan yang bulat. Agar Anda bisa melihat effek visual border-radius, sangat disarankan agar memberikan background-color atau border pada elemennya, ini tidak wajib, ini supaya Anda bisa melihat effek perbatasan yang bulat.

Contoh:

Editor Online
  1. p {
  2. border: 3px solid green;
  3. }
  4. #p1 {
  5. border-radius: 5px 10px 15px 20px;
  6. }
  7. #p2 {
  8. border-radius: 5px 15px 20px;
  9. }
  10. #p3 {
  11. border-radius: 5px 20px;
  12. }
  13. #p4 {
  14. border-radius: 5px;
  15. }

Jadi, inilah cara kerjanya:

Jika property border-radius memiliki empat nilai:

  • border-radius: 5px 10px 15px 20px;
    • border-radius atas 5px
    • border-radius kanan 10px
    • border-radius bawah 15px
    • border-radius kiri 20px

Jika property border-radius memiliki tiga nilai:

  • border-radius: 5px 15px 20px;
    • border-radius atas 5px
    • border-radius kanan dan kiri 15px
    • border-radius bawah 20px

Jika property border-radius memiliki dua nilai:

  • border-radius: 5px 20px;
    • border-radius atas dan bawah 5px
    • border-radius kanan dan kiri 20px

Jika property border-radius memiliki satu nilai:

  • border-radius: 5px
    • keempat sudut border-radius 5px

Property border-radius salah satu fitur baru dari CSS3

Daftar property border

PropertyKegunaanya
borderMengatur semua property border dalam satu deklarasi
border-bottomMengatur semua property border bawah dalam satu deklarasi
border-bottom-colorMengatur warna border bagian bawah
border-bottom-styleMengatur gaya border bagian bawah
border-bottom-widthMengatur lebar border bagian bawah
border-colorMengatur warna border semua sudut
border-leftMengatur semua property border kiri dalam satu deklarasi
border-left-colorMengatur warna border bagian kiri
border-left-styleMengatur gaya border bagian kiri
border-left-widthMengatur lebar border bagian kiri
border-radiusMengatur semua sudut border yang membulat
border-rightMengatur semua property border kanan dalam satu deklarasi
border-right-colorMengatur warna border bagian kanan
border-right-styleMengatur gaya border bagian kanan
border-right-widthMengatur lebar border bagian kanan
border-styleMengatur gaya border manakah yang akan digunakan
border-topMengatur semua property border atas dalam satu deklarasi
border-top-colorMengatur warna border bagian atas
border-top-styleMengatur gaya border bagian atas
border-top-widthMengatur lebar border bagian atas
border-widthMengatur lebar border semua sudut

Leave a Reply

Your email address will not be published. Required fields are marked *