Как закруглить уголки у HTML-элемента через CSS

Те, кто знает CSS, знает и это, конечно.

Поэтому это сообщение - лично для меня самого, потому что я все время забываю, как эти круглые уголки делаются в CSS.

Я тут очередной новый сайт делаю и возникла необходимость их реализовать. Если не злоупотреблять закругленностью, то закругленные уголки прекрасно подчеркивают части контента и повышают читаемость того же текста.

Тем более, что последние версии браузеров, включая IE10, поддерживают их.

Итак, как же их сделать эти закругленные уголки?

Просто нужно запомнить эти магические строчки (хотя бы первую из них):

border-radius: 15px;
-moz-border-radius: 15px;

Ну в пикселях (px) у вас может быть что угодно и 5, и 10, и 15, и 20. Лично я выбираю необходимый минимум, чтобы закругленность виднелась, но не перетягивала на себя все внимание.

Кстати, можно обойтись и без последней строчки. Firefox уже давно понимает декларацию и без префикса -moz-. То для старых версий Firefox нужно.

А вот старые версии IE обычно не понимают этот синтаксис. Поэтому без дополнительных  ухищрений - вы останетесь с квадратными уголками. А вот IE10 порадовал - округленности показывает.

Подытожим:

1. В вашем файле стилей пишем для нужного селектора что-то вроде:
   
   .roundedCorners
   {
     border-radius: 5px;
   }
2. В вашем HTML-файле, используем этот класс:
   
   <div class="roundedCorners">
   У меня закругленные уголки!
   </div>

И будет вам счастье.