Atrybuty mieszane zaokrąglenia obramowania {border-radius}

Jak ustawić zaokrąglenia dla wszystkich narożników jednocześnie?

CSS 3

selektor { border-radius: wartości atrybutów }

Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości zaokrąglenia rozdzielone spacjami (w kolejności: górne-lewe, górne-prawe, dolne-prawe, dolne-lewe).

Polecenie pozwala ustalić kilka wartości promieni zaokrąglenia jednocześnie. Możliwe jest przy tym podanie:

zaokrąglenie symetryczne - promień pionowy będzie taki sam jak poziomy (np.: "5px 10px 15px 20px")
zaokrąglenie niesymetryczne - pionowe promienie zaokrąglenia można podawać po znaku ukośnika (np.: "5px 10px 15px 20px / 20px 15px 10px 5px")

Pominięcie wybranych wartości (zarówno w przypadku pierwszego jak i drugiego sposobu) spowoduje, że przyjmą one wartości takie jak narożnik leżący po drugiej stronie przekątnej elementu.

Przy tworzeniu zaokrąglenia obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj.

Przykład {border-radius}

border-radius: 5px 10px 15px 20px

border-radius: 10px 20px / 20px 10px

Pytania i odpowiedzi {border-radius}

Co to jest "border-radius"?

border-radius w CSS to właściwość, która pozwala zaokrąglić rogi elementu. Określa wartość promienia zaokrąglenia, tworząc efekt zaokrąglonych rogów. Może być stosowana dla różnych elementów, takich jak DIV, IMG czy BUTTON.

Jak zaokrąglić "border"?

Aby zaokrąglić border w CSS, można użyć właściwości border-radius i określić wartość promienia zaokrąglenia. Na przykład: "border-radius: 10px" zaokrągli wszystkie cztery rogi obramowania o promieniu 10 pikseli.

Jak zaokrąglić DIV CSS?

Aby zaokrąglić rogi <div> w CSS, użyj właściwości border-radius i określ wartość promienia zaokrąglenia. Na przykład: <div style="border-radius: 10px; background-color: lightgray; padding: 20px">Treść</div> zaokrągli rogi <div> o promieniu 10 pikseli.

Jak zaokrąglić rogi w zdjęciu?

Aby zaokrąglić rogi w zdjęciu (<img>) w CSS, użyj właściwości border-radius i określ promień zaokrąglenia. Przykład: <img src="obraz.jpg" style="border-radius: 50%" alt="Zdjęcie"> zaokrągli rogi zdjęcia na pół obrazu, tworząc efekt zaokrąglonego wycinka.