WeBlog — блог про веб-программирование

В CSS3 есть свойство "border-radius" которое закругляет края у элемента.

ebkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px

/* CSS3 (пока не поддерживается браузерами) */
border-radius: 6px;
/* Safari, Chrome */
-webkit-border-radius: 6px;
/* FireFox */
-moz-border-radius: 6px;

/* Можно задавать радиус для отдельного края */
border-top-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-top-left-radius: 3px; 

Свойство очень странно отрабатывается на элементе таблицы TH.

Очень наглядный сервис для генерации CSS3 кода:
http://border-radius.com/

CSS3 позволяет задавать градиенты без использования картинок.

Градиенты задаются следующим образом:

div {
     background-color: #1a82f7; /* fallback color */
     background-image: url(images/linear_bg_2.png); /* fallback image */
     background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

Синтаксис для Mozilla:

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Для WebKit (Safari, Chrome):

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Взято отсюда: http://css-tricks.com/css3-gradients/

Пара полезных сервисов для создания градиентов на CSS3:
http://gradients.glrzad.com/
http://www.westciv.com/tools/gradients/index.html

На втором есть еще несколько инструментов для создание эффектов на HTML5+CSS3.