Радиус контура?

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

Вместо этого я использовал box-shadow. Мне на самом деле понравился плавный вид тени, но эту тень можно настроить, чтобы имитировать закругленный контур:

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent; /* для высококонтрастных режимов */
    transition: .1s;
}

/* Плавный контур с помощью box-shadow: */
.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

/* Жесткий "контур" с помощью box-shadow: */
.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

<input class="text1"> 
<br>
<br>
<input type="text" class="text2">

Таким образом, с помощью box-shadow вы можете создать желаемый эффект, сохранив при этом закругленные края!

Похожий на ответ Леи Хейс, вот как я это сделал:

div {
  background: #999;
  height: 100px;
  width: 200px;
  border: #999 solid 1px;
  border-radius: 10px;
  margin: 15px;
  box-shadow: 0px 0px 0px 1px #fff inset;
}

<div></div>

Никакого вложения DIV или jQuery не требуется. Хотя для краткости я оставил без внимания варианты -moz и -webkit некоторых свойств CSS. Вы можете увидеть результат выше.

Вы можете использовать следующий код для добавления красной рамки с помощью свойства box-shadow в CSS:

box-shadow: 0px 0px 0px 1px red;

Этот стиль создает тень на элементе с заданными параметрами: первое и второе значения 0px означают смещение по оси x и y соответственно (в данном случае тень не смещена), третье значение 0px определяет размытие тени (тоже отсутствует), а четвертое значение 1px задает размер тени, что в данном контексте эффективно создает эффект рамки вокруг элемента. Цвет тени задан как красный.

Мы можем увидеть наши пожелания довольно скоро, установив outline-style: auto. Эта функция находится на радарах WebKit: http://trac.webkit.org/changeset/198062/webkit

Увидимся в 2030!

Я только что нашел отличное решение этой проблемы, и, посмотрев на все ответы, которые были даны до сих пор, я не увидел, чтобы кто-то его упомянул. Итак, вот что я сделал:

Я создал CSS-правило для класса и использовал псевдокласс :focus для этого правила. Я установил outline: none, чтобы убрать этот стандартный светло-голубой 'контур', который Chrome использует по умолчанию и который нельзя сделать с закругленными углами. Затем в том же псевдоклассе :focus, где больше не существует этого контура, я добавил свойства радиуса и границы. В результате получилось следующее:

outline: none;
border-radius: 5px;
border: 2px solid maroon;

Теперь появляется граница цвета бордо с закругленными углами, когда элемент выбран с помощью клавиши Tab пользователем.