Рамки в CSS

Полупрозрачная рамка

Используя полупрозрачную рамку, не забываем указать background-clip:padding-box, чтобы фон элемента не портил эффект полупрозрачности.

.container{ background:green; }
.block{
  background:yellow; 
  border:10px solid hsla(0, 0%, 100%, 0.5); 
  background-clip:padding-box;
}

Несколько рамок

Добавить элементу несколько рамок поможет свойство box-shadow и его параметр spread radius (радиус размазывания).

.block{
  background:#eee; 
  box-shadow:0 0 0 10px green, 
        0 0 0 15px aqua, 
        0 0 0 25px blue;
}

Двойная рамка

Не забываем и про контур элемента outline, который дает простор для творчества в оформлении рамок.

.block{
  background:darkblue; 
  border:3px solid white;
  outline:3px dashed white;
  outline-offset:-15px;
}

Внутреннее скругление

Скругленные внутренние углы при обычных внешних достигаются сочетанием свойств border-radius, box-shadow и outline. Эффект основан на том, что контур outline в большинстве браузеров не наследует скругление углов. Однако в ближайшем будущем этот стандарт может измениться. Кроме того необходимо тщательно подбирать толщину рамок, чтобы одна не выглядывала из-под другой.

.block {
  background:orange;
  border-radius:15px;
  padding:10px;
  box-shadow:0 0 0 8px red;
  outline:10px solid red;
}