Фоновое изображение с граничным радиусом во входном или текстовом поле

Question

Можно ли применить радиус границы в фоновом изображении текста <input> или <textarea>?

Answer 1

Свойство border-radius применяется как к встроенному, так и к блочному уровню.

Таким образом, вы можете создавать закругленные углы на input и textarea.

Однако свойство border-radius не влияет на фоновое изображение, связанное с элементом.

Короткий ответ: no.

Для иллюстрации, если у вас есть следующий HTML:

<textarea class="ex1" name="theText" >Example 1</textarea> 

и примените следующий CSS:

textarea.ex1 { 
    border-width: 0; 
    border-radius: 10px; 
    background-color: beige; 
    padding: 5px; 
    width: 200px; 
    height: 200px; 
} 

textarea.ex2 { 
    border-width: 0; 
    border-radius: 10px; 
    background: lightgray url(http://placekitten.com/150/150) 
       center center no-repeat; 
    padding: 5px; 
    width: 200px; 
    height: 200px; 
} 

вы видите, что textarea элемент имеет закругленные углы, но скругленные углы не влияет на фоновое изображение.

See Demo Fiddle

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

Answer 2

Да. Проверьте это для улицы

Border-radius on background-image

Следуйте выше ссылке, чтобы получить полную информацию.