Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Batas Gambar HTML Menggunakan borderImage Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti Style borderImage DOM pada HTML merupakan properti singkatan yang digunakan untuk mengatur properti borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset, dan borderImageRepeat.


Sebelum memahami lebih dalam materi tentang Mengatur Batas Gambar HTML Menggunakan borderImage Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Warna Batas HTML Menggunakan borderColor Style DOM, Mengatur Border HTML Menggunakan borderCollapse Style DOM, dan Mengatur Lebar Batas Bawah HTML Menggunakan borderBottomWidth Style DOM.

Sintak:
  • digunakan untuk mengembalikan nilai properti borderImage: object.style.borderImage
  • digunakan untuk mengatur nilai properti borderImage: object.style.borderImage = "source slice width outset repeat|initial|inherit"

Property Values: terdapat 7 value properti yang dapat digunakan pada properti borderImage yang dijelaskan sebagai berikut.
  • border-Image-Source: digunakan untuk menampung sumber gambar yang akan digunakan pada properti.
  • border-Image-Slice: digunakan untuk menentukan inward offsets dari image-border.
  • border-Image-Width: digunakan untuk menampung ukuran lebar dari border image yang akan digunakan.
  • border-Image-Outset: digunakan untuk mendefinisikan border area yang akan diperlebar.
  • border-Image-Repeat: digunakan untuk mendefinisikan border yang harus dilakukan proses repeated, rounded, atau stretched.
  • initial: digunakan untuk mengembalikan nilai default dari properti.
  • inherit: digunakan untuk menerima turunan properti dari elemen parent.

Return Values: berfungsi untuk mengembalikan sebuah nilai strig yang merepresentasikan properti border-image dari suatu elemen.

Baca Juga:

Contoh: memperlihatkan perubahan dari border-image.

<!DOCTYPE html>

<html>

 

<head>

<style>

#my 

{

border: 50px solid transparent;

width: 250px;

padding: 15px 15px;

 

<!-- Logo SMANDELA -->

-webkit-border-image:

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtScPwjtA7g64aDduxeEd6YdFJqUYA2IU0Vv2ysXZEw4PVziHYCoGp4SRQh6zz0BhzgZJ07-_-0M7-Hj70c0nWxZ85Iz3icubb5fR-UJYoreKKAk9JDuitrkcAX1yCKoeO93LrxHwgps/s2048/logo+sman+8+semarang.png)

100 100 stretch;

 

<!-- Logo SMAGA -->

-o-border-image:

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6tBH2dG2gvgPs6C7UWdB5Zx23OrnyS6sbtyab2Mu0tkVzy9BuAuuD6rNTqcOAXur_iY5awI3yJVyuYev6lwxGtRK-eDNaYFaI1nV5R-kaFqZxFTDzrwT1ZiWp1AShGGFY9Ictsbd-s_Q/s2048/Untitled-2.png)

100 100 stretch;

 

border-image:

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5dlr7i-I5tKd_qP_npv8yC4bmEpyqm8ofl4iULjU60caEfiKfilDGEwrWy5Vkl_7yWoz0qx6Njv-8G2-UiJY0TWJ3YoE9xlf6a-gE3GBsW3uIuCfU7fCtbXdhncM7zrLOlHuGLbEe9-8/s393/Capture.PNG)

100 100 stretch;

}

</style>

</head>

 

<body>

 

<h3>

Klik tombol "Change" untuk 

mengubah properti border-image

</h3>

 

<button 

onclick="myFunction()">

Change

</button>

 

<div id="my">

<h1>

<font color="green">

Blog Elfan

</font>

</h1>

</div>

<script>

function myFunction() 

{

document.getElementById("my").style.WebkitBorderImage =

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtScPwjtA7g64aDduxeEd6YdFJqUYA2IU0Vv2ysXZEw4PVziHYCoGp4SRQh6zz0BhzgZJ07-_-0M7-Hj70c0nWxZ85Iz3icubb5fR-UJYoreKKAk9JDuitrkcAX1yCKoeO93LrxHwgps/s2048/logo+sman+8+semarang.png)30 30 round";

 

document.getElementById("my").style.OBorderImage =

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6tBH2dG2gvgPs6C7UWdB5Zx23OrnyS6sbtyab2Mu0tkVzy9BuAuuD6rNTqcOAXur_iY5awI3yJVyuYev6lwxGtRK-eDNaYFaI1nV5R-kaFqZxFTDzrwT1ZiWp1AShGGFY9Ictsbd-s_Q/s2048/Untitled-2.png)30 30 round";

 

document.getElementById("my").style.borderImage =

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5dlr7i-I5tKd_qP_npv8yC4bmEpyqm8ofl4iULjU60caEfiKfilDGEwrWy5Vkl_7yWoz0qx6Njv-8G2-UiJY0TWJ3YoE9xlf6a-gE3GBsW3uIuCfU7fCtbXdhncM7zrLOlHuGLbEe9-8/s393/Capture.PNG)30 30 round";

}

</script>

 

</body>

 

</html>


Artikel ini didedikasikan kepada: Ghazi Dzulfikar Putra Bagus, Gilar Dwiki Yoga, Gladiza Cahyandaru Hakiki, Hanityo Rizky Pratama Widodo, dan Helga Maulida Qonitah.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Batas Gambar HTML Menggunakan borderImage Style DOM"

  1. AnonimRabu, 27 April 2022 pukul 12.02.00 WIB

    Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderImage Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 27 April 2022 pukul 12.03.00 WIB

      Berikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti borderStyle DOM pada HTML:
      1. Google Chrome 1.0
      2. Internet Explorer 4.0
      3. Firefox 1.0
      4. Opera 3.5
      5. Safari 1.0

      Hapus
  2. AnonimSenin, 09 Mei 2022 pukul 09.01.00 WIB

    Apa yang dimaksud dengan properti borderImage style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSenin, 09 Mei 2022 pukul 09.01.00 WIB

      Properti borderImage Style DOM pada HTML merupakan properti sytle yang dapat digunakan untuk mengatur properti borderImageSource, borderImageSlice, borderImgaeWidth, borderImageOutset, dan borderImageRepeat pada elemen HTML.

      Hapus
    2. AnonimSenin, 09 Mei 2022 pukul 09.01.00 WIB

      Properti borderImage Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mendapatkan gambar batas dari suatu elemen.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -