2.3 - Рамки в CSS

В зависимости от дизайна, довольно часто бывает необходимо задать внешний вид рамки определенного блока на странице.
Для указания рамки, в CSS есть свойство border. Благодаря этому свойству можно легко задать нужный стиль отображения рамки для блока.
За внешний вид рамки отвечают три параметра:

  • border-width (ширина рамки), 
  • border-style (тип рамки) 
  • border-color (цвет рамки)

Хотя для указания рамки хватит только одного свойства border-style, полностью задать внешний вид можно только с использование трех свойств.

Пример создаия рамки в CSS

<html>  <head>   <title>Рамки в CSS</title>   <style>    p{      border-width: 1px;      border-style: solid;      border-color: #aaa;     }   </style>  </head>  <body>   <h3>Заголовок</h3>   <p>    Текст, вокруг которого будет рамка   </p>  </body> </html>

Результат

Пример рамки в CSS

Маленькая хитрость: для указания все трех параметров не обязательно использовать разные свойства (border-width, border-style, border-color). Все это можно занести в одно свойство и указывать через пробел.

Пример

 p{ border: 1px solid #aaa; }

Такая запись выгладит намного аккуратнее и главное меньше занимает места.

Задание рамки только с одной стороны

Бывают случаи, когда рамку нужно указать только с одной стороны. Для этих целей есть свойсва в CSS, которые указывают с какой стороны задавать стиль рамки.

Пример использования рамки с одной стороны

<html>  <head>   <title>Рамки в CSS</title>   <style>    p{      border-bottom: 5px solid #aaa;     }   </style>  </head>  <body>   <h3>Заголовок</h3>   <p>    Текст, вокруг которого будет рамка   </p>  </body> </html>

Результат

Рамка в CSS с одной стороны

В этом примере рамка отображается только снизу блока. Также можно задать внешний вид рамки с любой другой стороны.

  • border-top (сверху)
  • border-right (справа)
  • border-left (слева)
  • border-bottom (снизу)


Стиль отображения рамки

В примерах выше рамка отображалась сплошной линией. Но кроме этого можно указать другой стиль для рамки например пунктир

<html>  <head>   <title>Рамки в CSS</title>   <style>    p{      border: 1px dashed #ccc;     }   </style>  </head>  <body>   <h3>Заголовок</h3>   <p>    Текст, вокруг которого будет рамка   </p>  </body> </html>

Результат

Стиль рамки CSS

Благодаря этому уроку вы знаете как создать рамку в CSS.

Список уроков