Zaobljene obrobe (border-radius)

Lastnost border-radius omogoča zaobljene robove elementov. Vrednost lahko določimo v pikslih ali odstotkih. Zaobljenost lahko nastavimo za vse kote enako ali za vsakega posebej.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Zaobljene obrobe</title>
    <style>
        .container {
            margin: 20px;
            padding: 20px;
            background-color: #f8f9fa;
        }
        .element {
            margin: 15px;
            padding: 20px;
            background-color: #ffffff;
            border: 2px solid #3498db;
            color: black !important;
        }
        .rahlo { border-radius: 5px; }
        .srednje { border-radius: 15px; }
        .mocno { border-radius: 25px; }
        .krog { 
            border-radius: 50%;
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .neenakomerno {
            border-radius: 15px 30px 45px 60px;
            /* zgornji-levi zgornji-desni spodnji-desni spodnji-levi */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="element rahlo">Rahlo zaobljeni robovi (5px)</div>
        <div class="element srednje">Srednje zaobljeni robovi (15px)</div>
        <div class="element mocno">Močno zaobljeni robovi (25px)</div>
        <div class="element krog">Popolnoma okrogel element</div>
        <div class="element neenakomerno">Različno zaobljeni robovi</div>
    </div>
</body>
</html>

REZULTAT