CSS3 позволяет разработчикам по-новому стилизировать фон и границы HTML-элементов. Ниже представлены CSS-свойства, которые позволяют это сделать:

• border-radius – позволяет закруглять границы (border) HTML-элементов
• border-break – заканчивает границу элемента, которая была рассположена в точке разрыва (конец страницы, колонки, cтроки)
• border-image – устанавливает изображение как границу (вместо использования стилизированных границ)
• box-shadow – добавляет тень элементу

Данная возможность CSS3 позволяет отображать информацию в нескольких колонках, с помощью меньшего количества HTML-кода. Специально для этого добавлен новый вид контейнера - column box.

Содержание в многоколоночном элементе распределяется по принципу: от колонки к колонке. Сolumn box находится в родительском div-контейнере, содержащему контент. Свойства сolumn-count и column-width определяют количество колонок и их ширину. Все колонки равны по ширине, высоте и имеют определенное расстояние между собой.

Главная задача данного модуля CSS - разделение контента и представления. CSS3 упрощает позиционирование элементов двумя новыми методами: шаблонное позиционирование (Template Based Positioning) и отображение в виде закладок (Tabbed Displays). Шаблонное позиционирование позволяет расположить элементы в ячейках условной сетки. Отображения с помощью закладок распологает элементы в виде закладок, показывая только выбраный элементу.

Цель этого модуля CSS - упрощение позиционирования элементов: мы создаем сетку и выравниваем элементы внутри ячеек.

Сетка может иметь один из следующих типов:

• Явная сетка – сетка с явно заданными столбцами и строками.
• Естественная сетка – создается автоматически, например в многоколоночных элементах (края с обеих сторон колонки создают границы сетки).
• Сетка по умолчанию - элементы, которые не подходят под вышеперечисленные определения, рассматриваются как имеющие сетку с одной единственной ячейкой.

В CSS3 были добавлены новые виды селекторов. Некоторые из них приведены ниже:

• E:only-of-type - выбирает элемент, который является ближайшим sibling элементом того же типа
• E:not(s) - возвращает любой элемент, который не соответствует простому селектору s
• E ~ F - возвращает элемент F, который следует после элемента E
• E:nth-child(n) - возвращает элемент, который является n-ым по счету дочерным элементом исходного
• E:nth-last-child(n) – выполняет то же, что и предыдущий селектор, но счет идет от последнего элемента
• E:nth-of-type(n) - возвращает элемент, который является n-ым по счету sibling элементом того же типа

Цель нововведения - расширить поддержку различных типов медиа путем добавления css-свойств, вычисляемых с учетом текущего типа медиа. Некоторые из них могут быть использованы для задания высоты, ширины и цвета элемента в зависимости от медиа типа. Это позволит настраивать внешний вид страницы для различных устройств без переключения режимов отображения страницы.