Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Batas Perulangan Gambar HTML borderImageRepeat DOM

Properti borderImageRepeat DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai properti borderImageRepeat. Properti ini berfungsi untuk menentukan apakah border-image harus fill atau stretched area, mengatur nilai inisial, menerima nilai turunan dari parent, dan lain sebagainya. Properti borderImageRepeat penggunaannya bergantung pada kebutuhkan yang akan digunakan untuk membuat image-border terlihat lebih atraktif.

4 Contoh Penggunaan Properti borderImageRepeat Style DOM pada HTML
Ilustrasi borderImageRepeat HTML

Sebelum memahami lebih dalam materi tentang Mengatur Batas Perulangan Gambar HTML borderImageRepeat DOM, terlebih dahulu pelajari materi tentang: Mengatur Batas Gambar HTML Menggunakan borderImageOutset Style DOM [klik], Mengatur Batas Gambar HTML Menggunakan borderImage Style DOM [klik], dan Mengatur Warna Batas HTML Menggunakan borderColor Style DOM [klik].

Sintak:
  • Berfungsi untuk mengembalikan nilai properti borderImageRepeat: object.style.borderImageRepeat
  • Berfungsi untuk mengatur nilai properti borderImageRepeat: object.style.borderImageRepeat="stretch|repeat|round|initial|inherit"

Return Values: digunakan untuk mengembalikan nilai border-image.

Baca Juga:

Property Values:
  • stretch: digunakan untuk stretch gambar yang memenuhi seluruh area, dan merupakan nilai default dari properti borderImageRepeat. Sintak: object.style.borderImageRepeat="stretch";
  • repeat: digunakan untuk melakukan perulangan border-image untuk memenuhi seluruh area. Sintak: object.style.borderImageRepeat = "repeat";
  • round: digunakan untuk melakukan perulangan image atau gambar untuk memenuhi area. Jika image yang digunakan tidak memenuhi area pada keseluruhan bingkat, maka akan dilakukan pengukuran skala ulang terhadap gambar. Sintak: object.style.borderImageRepeat = "round";
  • space: perbedaan antara nilai repeat adalah, jika nilai yang diberikan tidak memenuhi area keseluruhan ubin, maka ruang atau spasi tambahan akan diberikan disepanjang ubin tersebut. Sintak: object.style.borderImageRepeat = "space";
  • initial: digunakan untuk mengatur properti borderImageRepeat ke nilai default-nya.
  • inherit: digunakan untuk mengatur properti borderImageRepeat dari nilai elemen parent-nya.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MKK1 

{

border: 20px solid transparent;

width: 200px;

padding: 10px 20px;

 

/* Untuk Browser Safari */

-webkit-border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 round;

 

/* Untuk Browser Opera */

-o-border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 round;

border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 round;

}

</style>

</head>

 

<body>

 

<div 

id = "MKK1">

 

<h1>

Blog Elfan

</h1>

 

</div>

 

<br>

 

<button 

onclick = "Bonbon1()">

Click Here!

</button>

 

<p>

Klik tombol untuk mengubah 

properti.

</p>

 

<script>

function Bonbon1() 

{

/* Untuk Browser Safari */

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 stretch";

 

/* Untuk Browser Opera */

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 stretch";

 

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 stretch";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan


Klik tombol untuk mengubah properti.



Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MFF2 

{

border: 15px solid transparent;

width: 200px;

padding: 10px 20px;

 

/* Untuk Browser Safari */

-webkit-border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;

 

/* Untuk Browser Opera */

-o-border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;

 

border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;

}

</style>

</head>

 

<body>

 

<div 

id = "MFF2">

 

<h1>

Blog Elfan

</h1>

 

</div>

 

<br>

 

<button 

onclick="Bobon2()">

Click Here!

</button>

 

<p>

Klik tombol untuk mengubah 

properti.

</p>

 

<script>

function Bobon2() 

{

/* Untuk Browser Safari */

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 repeat";

 

/* Untuk Browser Opera */

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 repeat";

 

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 repeat";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan


Klik tombol untuk mengubah properti.



Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#BNM3 {

border: 15px solid transparent;

width: 200px;

padding: 10px 20px;

 

/* Untuk Browser Safari */

-webkit-border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;

 

/* Untuk Browser Opera */

-o-border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;

 

border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;

}

</style>

</head>

 

<body>

 

<div 

id = "BNM3">

 

<h1>

Blog Elfan

</h1>

 

</div>

 

<br>

 

<button 

onclick="Bonbon3()">

Click Here!

</button>

 

<p>

Klik tombol untuk mengubah properti.

</p>

 

<script>

function Bonbon3() 

{

/* Untuk Browser Safari */

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 round";

 

/* Untuk Browser Opera */

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 round";

 

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 round";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan


Klik tombol untuk mengubah properti.



Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#BNK4 {

border: 15px solid transparent;

width: 200px;

padding: 10px 20px;

 

/* Untuk Browser Safari */

-webkit-border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;

 

/* Untuk Browser Opera */

-o-border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;

 

border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;

}

</style>

</head>

 

<body>

 

<div 

id="BNK4">

 

<h1>

Blog Elfan

</h1>

 

</div>

 

<br>

 

<button 

onclick="Bonbon4()">

Click Here!

</button>

 

<p>

Klik tombol untuk mengubah properti.

</p>

 

<script>

function Bonbon4() 

{

/* Untuk Browser Safari */

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 space";

 

/* Untuk Browser Opera */

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 space";

 

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

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 space";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan


Klik tombol untuk mengubah properti.


Artikel ini didedikasikan kepada: Gladiza Cahyandaru Hakiki, Hanityo Rizky Pratama Widodo, Helga Maulida Qonitah, Indah Novitasari, dan Intan Purnama Putri Damayanti.

5 komentar untuk "Mengatur Batas Perulangan Gambar HTML borderImageRepeat DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderImageRepeat Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderImageRepeat Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer 11.0
      3. Mozilla firefox
      4. Safari 6.0

      Hapus
  2. Apa yang dimaksud dengan properti borderImageRepeat Style DOM HTML?

    BalasHapus
    Balasan
    1. Properti borderImageRepeat Style DOM pada HTML merupakan properti yang digunakan untuk menentukan apakah gambar perbatasan harus dilakukan perulangan atau tidak, dibulatkan atau tidak, diberi spasi atau tidak, dan diregangkan atua tidak.

      Hapus
    2. Properti CSS borderImageRepeat Style DOM pada HTML digunakan untuk mendefinisikan bagaimana daerah tepi gambar sumber dapat disesuaikan pengaturan yang dilakukan oleh pengembang web agar bersesuaian dengan dimensi gambar berbatasan 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 -