Question

I’m trying to add a textarea with rounded corners to my site.

I’m using this css:

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

Right now this shows correctly in chrome, however when the textarea gets the focus, an orange border is added to the textarea and such border doesn’t have rounded corners.

Any idea on how to fix this?

Thanks

Answer 1

To remove the default outline, and then emulate that outline with one that’s more…style-compliant:

textarea {
    width: 40%;
    height: 10em;
    border-radius: 1em;
    border: 1px solid #000; /* everything up to and including this line
                               are aesthetics, adjust to taste */
    outline: none; /* removes the default outline */
    resize: none; /* prevents the user-resizing, adjust to taste */
}

textarea:focus {
    box-shadow: inset 0 0 3px 2px #f90; /* provides a more style-able
                                           replacement to the outline */
}​

JS Fiddle demo.