Закругление углов в CSS

@San4oPanso · Регистрация: 02.03.2010

Студворк — интернет-сервис помощи студентам

рылся в интернете, нашел как закруглить углы через свойство border-radius , такой вопрос а как закруглить углы только с одной стороны?

Vovan-VE · 27.09.2012, 19:41

CSS
1
border-top-left-radius: 42px;

https://developer.mozilla.org/... der-radius

@newJS · 27.09.2012, 20:38

Кому как мама в детстве показала, бардак полный

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
border-top-left-radius:11px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:11px;
 
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
 
-webkit-border-top-right-radius:4px;
-webkit-border-top-left-radius:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;

@Klerikadm · 15.01.2014, 15:13

супер ответ

@Олег126 · 15.01.2014, 15:21

Можно просто border-radius: 2px 3px 5px 10px; т.е. с каждого угла отдельно!

@monochromer · 15.01.2014, 17:44

Сообщение от newJS

Кому как мама в детстве показала, бардак полный

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
border-top-left-radius:11px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:11px;
 
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
 
-webkit-border-top-right-radius:4px;
-webkit-border-top-left-radius:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;

Предпочтительнее, чтобы свойства без префиксов шли в конце.
Думаю, для border-radius можно и вообще без префиксов обойтись. Поддержка браузерами хорошая - http://caniuse.com/#search=border-radius

@litvinov123 · 17.01.2014, 09:28

А для для кроссфраузерности в ie8? Ставил PIE, что-то он у меня вобще не работает? Может есть общепринятый ЯваСкрипт специально для ИЕ?

@KaRaNTiN · 17.01.2014, 11:32

Сообщение от litvinov123

А для для кроссфраузерности в ie8? Ставил PIE, что-то он у меня вобще не работает? Может есть общепринятый ЯваСкрипт специально для ИЕ?

есть еще position: relative\absolute. Должно идти в связке с PIE

@newJS · 17.01.2014, 21:24

Сообщение от litvinov123

Может есть общепринятый ЯваСкрипт специально для ИЕ?

тут нормальный файл, дает радиус и тень.
желательно почитать что пишет автор, как всегда есть ограничения

@telek · 02.04.2015, 10:41

вот еще метод закругления углов http://ftpn.ru/css-skruglenie-uglov/

@kostiquee · 02.04.2015, 10:49

Сообщение от telek

вот еще метод закругления углов http://ftpn.ru/css-skruglenie-uglov/

Зачем эти заморочки, border-radius проще намного...

@Xteda · 02.04.2015, 10:58

Если скругление углов не влияет на функционал

, то отказаться от скругленных углов на старых браузерах. И не надо подключать всякие говноскрипты вроде пая. Это нормальная практика.

Новые блоги и статьи Все статьи Все блоги /
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .

@San4oPanso 3 / 3 / 0 Регистрация: 02.03.2010 Сообщений: 96

	Закругление углов в CSS 27.09.2012, 19:38. Показов 10945. Ответов 11 Метки нет (Все метки) рылся в интернете, нашел как закруглить углы через свойство border-radius , такой вопрос а как закруглить углы только с одной стороны? 0

@Klerikadm 0 / 0 / 0 Регистрация: 02.12.2013 Сообщений: 8
	15.01.2014, 15:13
	супер ответ 0

@Олег126 45 / 45 / 4 Регистрация: 21.03.2013 Сообщений: 262
	15.01.2014, 15:21
	Можно просто border-radius: 2px 3px 5px 10px; т.е. с каждого угла отдельно! 1

@litvinov123 10 / 10 / 0 Регистрация: 16.11.2013 Сообщений: 57
	17.01.2014, 09:28
	А для для кроссфраузерности в ie8? Ставил PIE, что-то он у меня вобще не работает? Может есть общепринятый ЯваСкрипт специально для ИЕ? 0

@telek 1 / 1 / 2 Регистрация: 29.04.2014 Сообщений: 13
	02.04.2015, 10:41
	вот еще метод закругления углов http://ftpn.ru/css-skruglenie-uglov/ 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	02.04.2015, 10:58
	Если скругление углов не влияет на функционал , то отказаться от скругленных углов на старых браузерах. И не надо подключать всякие говноскрипты вроде пая. Это нормальная практика. 0