Не работает свойство border в scss

Question

Учусь прогать на css:

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/style.css">
        <title>Document</title>
    </head>
    <body>
        <div>
            <span class="par1">Lorem.</span>
            <span class="par2">Omnis!</span>
            <span class="par3">Necessitatibus?</span>
        </div>
    </body>
</html>

SCSS(через программу Prepros)

@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
$f1: 100px;
.par1 {
    font-family: "Source Code Pro";
    font-size: $f1;
}
.par2 {
    font-family: "Source Code Pro";
    font-size: 100px;
    border: 3px, solid, rgb(255, 0, 0);
    display: block;
}
.par3 {
    font-family: "Source Code Pro";
    font-style: italic;
    font-size: $f1;
}

Но не работает свойство border в браузерах Яндекс, Хром, Опера, IE.

Answer 1

border - это универсальное свойство, которое позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке. Разделять их необходимо пробелом. Браузер сам определяет, какое из них соответствует нужному свойству.

В вашем примере очевидная ошибка:

border: 3px, solid, rgb(255, 0, 0);

Значения вы разделяете пробелом и запятой. Решение: удалить запятые.

Более подробно о свойстве border можно почитать, например, здесь.

БЛОГ НА HUSL

Не работает свойство border в scss

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