Как закруглить края картинки в css?
2 ответа
от
fredy ,
3 года назад
@guillermo Закруглить края картинки в css, можно через свойство border-radius :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> img { border-radius: 10px; } </style> </head> <body> <img src="image/56666.jpeg" /> </body> </html> |
от
jose ,
год назад
@guillermo
Для закругления краев картинки в CSS можно использовать свойство border-radius. Например, чтобы закруглить края картинки на 50%, нужно добавить следующий код:
1 2 3 |
img {
border-radius: 50%;
}
|
Можно также указать значение в пикселях или других единицах измерения. Например:
1 2 3 |
img {
border-radius: 10px;
}
|
Если требуется закруглить только определенный угол, то можно использовать отдельные значения для каждого угла через пробел в порядке: верхний левый, верхний правый, нижний правый, нижний левый. Например:
1 2 3 4 5 6 |
img {
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 15px;
}
|
Это закруглит верхний левый угол на 20 пикселей, верхний правый на 10 пикселей, нижний правый на 5 пикселей и нижний левый на 15 пикселей.
15