До появления CSS3 вопрос со скруглением краев решался либо с помошью изображений, либо с помощью массива однопиксельных DIVов.
CSS3 решил эту задачу. Теперь за скругление краев отвечает свойство border-radius:
div { border-radius:10px 20px 30px 40px; }
Соответствие значений с углами такое:
- первое значение — это верхний левый угол;
- второе значение — верхний правый угол;
- третье значение — нижний правый угол;
- четвертое значение — нижний левый угол.
В этом случае использования border-radius уголки будут представлять собой четверть окружности.
Также есть возможность создания эллиптических уголков, т.е. уголки будут представлять собой четвертую часть эллипса. Запись свойства в этом случае будет выглятеть:
div { border-radius:10px 20px 30px 40px / 50px; }
Эта запись означает, что уголки по-горизонтали будут растянуты на 10px 20px 30px 40px соответственно, а по-вертикали вытянутся на 50px. Вообще эллиптическое скругление уголков происходит не совсем предстказуемо, потому что сказать сразу что произойдет при записи
div { border-radius:10px / 50px 20px 30px 40px; }
крайне сложно. В таких случаях нужно рассматривать каждый из них в отдельности.