Китегории

Как сделать рамку со скругленными уголками?

6 мая 2022

Для создания рамки вокруг блока используется стилевое свойство border, в качестве значения которого задается толщина, стиль и цвет линии. Если поверх такой линии наложить графические уголки, то мы убьем двух зайцев — получим нужные закругления и сохраним границу, которую можно увидеть даже при отключении картинок.

Вначале рисуем рамку в графическом редакторе (рис. 1). В нашем случае она имеет толщину два пиксела и серый цвет (#808080).

Рис. 1. Рамка на прозрачном фоне

Внутри рамка должна быть обязательно прозрачной, тогда можно будет задавать блоку желаемый цвет, а фон под уголками должен совпадать с цветом фона. Как показано на рис. 1, он белый.

Поскольку на рисунке нас интересуют только уголки, то для сайта изображение следует изменить — вырезать уголки и разместить их рядом по горизонтали или вертикали (рис. 2).

Рис. 2. Изображения для публикации

Увеличенный рисунок с уголками на прозрачном фоне представлен на рис. 3. Сверху вниз располагаются уголки: левый верхний, правый верхний, левый нижний и правый нижний.

Рис. 3. Увеличенное изображение уголков

После того, как рисунок подготовлен, пора переходить к коду. Для создания уголков нам потребуется четыре элемента, в их качестве можно использовать теги , , , и другие, для удобства вкладывая их один в другой. Для верхних уголков заведем класс с именем bt, а для нижних — класс bb (пример 1).

Пример 1. Код для создания блока

<div class="color_block">
  <em class="bt"><b>&nbsp;</b></em>
  <div class="block_content">
    Содержимое
  </div>
  <em class="bb"><b>&nbsp;</b></em>
</div>

В стилях к блоку добавляем рамку через свойство border, а вывод уголков делаем через универсальное свойство background. Рамка отображается вокруг блока, поэтому фоновый рисунок окажется внутри границы. Так что придется сдвигать фон на толщину линии через свойства top и left, предварительно установив относительное позиционирование (пример 2).

Пример 2. Добавление закруглений через один рисунок

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Закругленные уголки</title>
  <style type="text/css">
   .color_block {
    border: 2px #808080 solid; /* Параметры рамки */
    background: #e3ffec; /* Цвет фона */
   }
   em.bt, em.bt b, em.bb, em.bb b {
    display: block; /* Блочный элемент */
    height: 10px; /* Высота уголка */
    font-size: 0; /* Размер шрифта */
    background: url(images/corners.png) no-repeat; /* Путь к файлу с уголками */
    position: relative; /* Относительное позиционирование */
   }
   em.bt { 
    top: -2px; /* Сдвигаем левый верхний уголок вверх */
    left: -2px; /* Сдвигаем влево */
   }
   em.bt b {
    background-position:  100% -10px; /* Рисунок сдвигается к следующему уголку */
    left: 4px; /* Сдвигаем вправо */
   }
   em.bb { background-position: 0 -20px; top: 2px; left: -2px; }
   em.bb b { background-position: 100% -30px; left: 4px; }
   .color_block .block_content {
    padding: 0 7px; /* Поля вокруг текста */
   }
  </style>
  </head>
  <body> 
   <div class="color_block">
    <em class="bt"><b>&nbsp;</b></em>
    <div class="block_content">
     Чтобы изготовить пугало для горного поля, делают фигуру человека, 
     который держит в руках лук и стрелы. Птицы и звери видят его 
     и убегают. И хотя у пугала нет никаких намерений, олень не 
     подойдет к нему близко. Так пугало выполняет свое назначение, 
     и поэтому говорят, что оно стоит в горном поле не напрасно. 
    </div>
    <em class="bb"><b>&nbsp;</b></em>
   </div>
 </body>
</html>

Результат данного примера показан на рис. 4.

Рис. 4. Закругленные уголки у блока

Обратите внимание на следующие моменты. Сам рисунок с уголками в виде фона выводится только один раз и далее для определенных элементов меняет свою позицию через свойство background-position. Так как высота блока ограничена значением height, то увидеть весь рисунок целиком нельзя, поэтому мы видим нужный нам фрагмент. Для вложенных тегов сдвигать рисунок приходится с учетом смещения его родителя, поэтому в качестве значения left выступает удвоенная толщина границы.