Belajar CSS3 seputar border-radius dan border-image

belajar css

Border pada CSS3

CSS3 menyediakan dua property border baru yaitu, border-image dan border-radius. Dengan property border-image Anda bisa menambahkan gambar border custome buatan Anda sendiri, dan dengan property border-radius Anda bisa memberikan perbatasan yang bulat. Terkait seputar border yang lainnya, Anda bisa baca kembali CSS dasar seputar border.

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

Border radius individu

Anda bisa mengatur border radius 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 radius individu:

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

Contoh:

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

Border image source

Property border-image-source digunakan untuk menentukan jalur gambar yang akan digunakan sebagai perbatasan.

Contoh:

Editor Online
  1. #source {
  2. border: 10px solid transparent;
  3. border-image-source: url(https://hendky.com/editor/gambar/border-gambar.png);
  4. }

Jika Anda menggunakan property border-image-source maka Anda juga harus menentukan property border supaya bekerja.

Border image slice

Property border-image-slice digunakan untuk menentukan cara mengiris gambar border atau perbatasan.

Contoh:

Editor Online
  1. #border-img1 {
  2. border-image-slice: 20%;
  3. }
  4. #border-img2 {
  5. border-image-slice: 30%;
  6. }
  7. #border-img3 {
  8. border-image-slice: 40%;
  9. }

Border image width

Property border-image-width digunakan untuk menentukan lebar gambar border atau perbatasan.

Contoh:

Editor Online
  1. #border-img1 {
  2. border-image-width: 5px;
  3. }
  4. #border-img2 {
  5. border-image-width: 10px;
  6. }
  7. #border-img3 {
  8. border-image-width: 20px;
  9. }

Border image outset

Property border-image-outset digunakan untuk menentukan jumlah dimana area gambar perbatasan melampaui kotak perbatasan.

Contoh:

Editor Online
  1. #outset {
  2. border-image-outset: 10px;
  3. }

Border image repeat

Property border-image-repeat digunakan untuk menentukan apakah gambar perbatasan harus diulang (repeated), dibulatkan (rounded) atau diregangkan (stretched).

Contoh:

Editor Online
  1. #repeat {
  2. border-image-repeat: repeat;
  3. }
  4. #round {
  5. border-image-repeat: round;
  6. }
  7. #stretch {
  8. border-image-repeat: stretch;
  9. }

Border image shorthand

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

Property border-image shorthand berlaku untuk border-image dibawah ini:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

Urutan penulisan syntax:

border-image: source / slice / width / outset / repeat;

Contoh:

Editor Online
  1. #shorthand {
  2. border: 10px solid transparent;
  3. padding: 15px;
  4. border-image: url(https://hendky.com/editor/gambar/border-gambar.png) 20% / 10px / 20px stretch;
  5. }

Daftar property CSS3 border-radius dan border-image

PropertyKegunaanya
border-radiusProperty singkatan untuk mengatur semua sudut border yang membulat
border-top-left-radiusMenentukan border bulat sudut atas kiri
border-top-right-radiusMenentukan border bulat sudut atas kanan
border-bottom-right-radiusMenentukan border bulat sudut bawah kanan
border-bottom-left-radiusMenentukan border bulat sudut bawah kiri
border-imageProperty singkatan untuk mengatur semua property border-image- *
border-image-sourceMenentukan jalur ke gambar yang akan digunakan sebagai border
border-image-sliceMenentukan cara mengiris gambar border
border-image-widthMenentukan lebar gambar border
border-image-outsetmenentukan jumlah dimana area gambar perbatasan melampaui kotak perbatasan
border-image-repeatmenentukan apakah gambar perbatasan harus diulang (repeated), dibulatkan (rounded) atau diregangkan (stretched)

Leave a Reply

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