Нужно добавить обводку колесу

Создано колесо удачи, нужно добавить обводку вокруг него, нужный цвет - E3D5C8, код колеса оставлю ниже

const spinWheel = document.getElementById("spinWheel");
    const spinBtn = document.getElementById("spin_btn");
    const text = document.getElementById("text");
    const spinValues = [
        { minDegree: 31, maxDegree: 60, value: 'Ноутбук игровой MSI Katana GF76 12UD-263RU' },
        { minDegree: 0, maxDegree: 30, value: 'Lush3 + Ridge x 1 + Микрофон HyperX Quadcast S' },
        { minDegree: 61, maxDegree: 90, value: 'Беззеркальная камера Canon EOS R50 Body' },
        { minDegree: 331, maxDegree: 360, value: 'Lovense Webcam + Domi 2' },
        { minDegree: 301, maxDegree: 330, value: '"Капуста"' },
        { minDegree: 271, maxDegree: 300, value: '"Картошка"' },
        { minDegree: 211, maxDegree: 240, value: 'Apple iPhone 15' },
        { minDegree: 241, maxDegree: 270, value: '"Морковь"' },
        { minDegree: 181, maxDegree: 210, value: 'Cougar Throne – кресло для геймеров' },
        {
            minDegree: 151,
            maxDegree: 180,
            value: "Сертификат ВБ"
        },
    ];
    
    const size = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
    var spinColors = [
        "#303032",
        "#303032",
        "#303032",
        "#303032",
        "#303032",
        "#303032",
        "#303032",
        "#303032",
        "#303032",
        "#303032",
        "#303032",
        "#303032",
    ];
    let spinChart = new Chart(spinWheel, {
        plugins: [ChartDataLabels],
        type: "pie",
        data: {
            labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
            datasets: [{
                backgroundColor: spinColors,
                data: size,
            }, ],
        },
        options: {
            responsive: true,
            animation: { duration: 0 },
            plugins: {
                tooltip: false,
                legend: {
                    display: false,
                },
                datalabels: {
                    rotation: 90,
                    color: "#ffffff",
                    formatter: (_, context) => context.chart.data.labels[context.dataIndex],
                    font: { size: 24 },
                },
            },
        },
    });
    const generateValue = (angleValue) => {
        for (let i of spinValues) {
            if (angleValue >= i.minDegree && angleValue <= i.maxDegree) {
                text.innerHTML = `<p>Поздравляем, вы выиграли: <br> ${i.value} ! </p>`;
                spinBtn.disabled = false;
                break;
            }
        }
    };
    let count = 0;
    let resultValue = 101;
    spinBtn.addEventListener("click", () => {
        // spinBtn.disabled = false;
        // text.innerHTML = `<p>Желаю Удачи!</p>`;
        let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);
        let rotationInterval = window.setInterval(() => {
            spinChart.options.rotation = spinChart.options.rotation + resultValue;
            spinChart.update();
            if (spinChart.options.rotation >= 360) {
                count += 1;
                resultValue -= 5;
                spinChart.options.rotation = 0;
            } else if (count > 15 && spinChart.options.rotation == randomDegree) {
                generateValue(randomDegree);
                clearInterval(rotationInterval);
                count = 0;
                resultValue = 101;
            }
        }, 10);
    });
@import url('https://fonts.cdnfonts.com/css/rounds-black');
                    
    :root {
        /* Colors */
        --white_color: rgb(255, 255, 255);
        --gold_color: rgb(227, 213, 200);
        --green_color: rgb(45, 252, 26);
        --body_background: linear-gradient(to right, #141e30, #243b55);
        --spin_background: linear-gradient(to right, #C8B44F, #7D7A67);
    }
    h1 {
        position: absolute;
        font-size: 4rem;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--gold_color);
    }
    
    .container {
        width: 90%;
        max-width: 600px;
        margin-top: 70px;
        max-height: 600px;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        padding: 3rem;
        border-radius: 1rem;
    }
    
    .wheel_box {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .wheel_box img {
        width: 110px;
        height: 110px;
    }
    
    #spinWheel {
        max-height: inherit;
        width: inherit;
        transform: rotate(270deg);
    }
    
    #spin_btn {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        height: 26%;
        width: 26%;
        border-radius: 50%;
        cursor: pointer;
        border: 0;
        background: var(--spin_background);
        color: var(--white_color);
        text-transform: uppercase;
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        font-weight: 600;
    }
    
    .fa-solid {
        position: absolute;
        top: -8%;
        left: 45.5%;
        font-size: 4rem;
        background: linear-gradient(to right, #C8B44F, #7D7A67);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transform: rotate(-225deg);
    }
    
    #text {
        font-size: 20px;
        text-align: center;
        margin-top: 1.5rem;
        color: var(--gold_color);
        font-family: 'Rounds Black', sans-serif;
    }
    
    
<div class="container">
  <div class="wheel_box">
    <canvas id="spinWheel"></canvas>
    <button id="spin_btn"><img src="./img/vipbaza.png"alt="Logo"></button>
    <i class="fa-solid fa-location-arrow"></i>
  </div>
  <div id="text"></div>
</div>
<script src="script.js"></script>


Ответы (1 шт):

Автор решения: WTFisGoingOn

Добавьте стиль border: 5px solid #E3D5C8; к нужному элементу.

→ Ссылка