1

Is it possible to apply border-radius in the background-image of a text <input> or <textarea>?

Kuba hasn't forgotten Monica
  • 95,931
  • 16
  • 151
  • 313
user2799274
  • 133
  • 1
  • 1
  • 9
  • -1 it's impossible in textarea or input text. – user2799274 Sep 21 '13 at 17:57
  • yes it is impossible to apply border radius to a background image, and you should apply the radius to an element and set the picture position to "center center", so the image looks to be rounded. :) – mjyazdani Sep 21 '13 at 20:26

2 Answers2

1

The border-radius property applies to either an inline or a block level element.

Therefore, you can created rounded corners on a input and a textarea element.

However, the border-radius property does not affect any background image associated with an element.

The short answer is: no.

To illustrate, if you have the following HTML:

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

and apply the following 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;
}

you see that the textarea element has rounded corners, but the rounded corners do not affect the background image.

See Demo Fiddle

Workarounds are possible by using absolute positioning of extra sibling elements, but that is outside of the scope of your question.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • in second sample of this answer if you want the image to be rounded (not the text area), It's just enough to change the height and width of textarea.ex2 to "140px"; – mjyazdani Sep 21 '13 at 20:11
  • @mj-y The point of interest here is that the background image itself is not taking on rounded corners. The rounded corners are being applied to the element, not the background. – Marc Audet Sep 21 '13 at 20:15
-1

Yes. Check this out-

Border-radius on background-image

Follow the above link to get the complete details.

Community
  • 1
  • 1
halkujabra
  • 2,844
  • 3
  • 25
  • 35