Menu
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
394
it's very simple in CSS to round the corners of a div use 'border-radius' CSS property on the div tag and place the image within it. this should give you your desired result!
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
The border-radius CSS property is what adds the rounded corners. You can experiment with different values to get it the way you like. border-radius: 75px; If you want it to be a circle, add border-radius: 50%; .
To make the div's borders rounded, you could add the following styling: border-radius: 15px; The above sets a 15 pixel radius on the top-left, top-right, bottom-left and bottom-right corners of the element. The higher the value of the radius, the more rounded the edge becomes.
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.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
