<header>
    <h2 class="title">element.style.borderImageSource</h2>
    <p class="description">Встановлює джерело зображення для використання як межу елемента.</p>
</header>
<main>
    <div class="result">
        <div class="bordered-element" id="element">Приклад межі зображення</div>
        <div class="buttons">
            <button onclick="changeBorderImage('url(https://picsum.photos/61)')">Зображення 1</button>
            <button onclick="changeBorderImage('url(https://picsum.photos/60)')">Зображення 2</button>
            <button onclick="changeBorderImage('none')">Без зображення</button>
        </div>
    </div>
</main>
body {
    font-size: 16px;
    line-height: 1.5;
    font-family: monospace;
}

header {
    background-color: #f1f1f1;
    margin-bottom: 25px;
    padding: 15px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
    -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
    box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
    padding-bottom: 15px;
    border-bottom: 1px solid #999;
}

header p.description {
    font-style: italic;
    color: #222;
}

.result {
    background-color: #f8f8f8;
    padding: 15px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
    -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
    box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bordered-element {
    width: 300px;
    height: 200px;
    border-width: 15px;
    border-style: solid;
    margin-bottom: 20px;
}

.buttons {
    display: flex;
    gap: 10px;
}

.buttons button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
function changeBorderImage(image) {
    var element = document.getElementById('element');
    element.style.borderImageSource = image;
    element.style.borderImageSlice = '30';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.