get rid of rectangle around rouded boxes

Question

I've a text area in my html, and this has rounded edges. but when I click inside the text area, it is showing a rectangle around the rounded edges.

Below is my HTML.

<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" onclick="TextAreaToggle()" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>

and here is my CSS

.Textareausermsg {
    border-radius: 15px;
    font-size: 15px;
    text-align: left;
    line-height: 34px;
}

working fiddle https://jsfiddle.net/jrss9192/1/

score 5 · Accepted Answer · answered Feb 07 '17 at 10:21

5

Just remove the outline

.Textareausermsg {
    border-radius: 15px;
    font-size: 15px;
    text-align: left;
    line-height: 34px;
    outline: 0;
}

answered Feb 07 '17 at 10:21

Mazz

1,859
26
38

score 2 · Answer 2 · answered Feb 07 '17 at 10:22

The rectangle that you are seeing is a browser-default outline. While its not a good idea to remove browser default styles, it can be done by declaring outline: none;

.Textareausermsg {
    border-radius: 15px;
    font-size: 15px;
    text-align: left;
    line-height: 34px;
    outline: none;
}

<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>

score 1 · Answer 3 · answered Feb 07 '17 at 10:22

1

Use: outline: none when the textarea is focused

  textarea:focus{
    outline: none;
}

answered Feb 07 '17 at 10:22

Yahya Hussein

8,767
15
58
114

score 1 · Answer 4 · answered Feb 07 '17 at 10:22

That's outline of textarea appears on focus just set outline:0; on .Textareausermsg

.Textareausermsg {
    border-radius: 15px;
    font-size: 15px;
    text-align: left;
    line-height: 34px;
    outline:0;
}

<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="width: 260px; height: 41px;"></textarea>

score 0 · Answer 5 · answered Feb 07 '17 at 10:22

The rectangled area is called "outline" and it's a css property. Try add outline: none; in your css code to remove it.

If you want a "blue border" when you click / focus the element, try this

.Textareausermsg {
    border-radius: 15px;
    font-size: 15px;
    text-align: left;
    line-height: 34px;
    outline: none;
}

.Textareausermsg:focus, .Textareausermsg:active {
    border:1px solid blue;
}

https://jsfiddle.net/jrss9192/2/

score 0 · Answer 6 · answered Feb 07 '17 at 10:24

Here is the solution to your question.

 .Textareausermsg {
        border-radius: 15px;
        font-size: 15px;
        text-align: left;
        line-height: 34px;
        outline: none;
    }
    .Textareausermsg :active , .Textareausermsg :focus { outline:none}

get rid of rectangle around rouded boxes

6 Answers6