Rounded corner for textfield not working in ExtJS

I have a textfield defined below as such:

xtype: 'textfield',
x: 490,
y: 365,
cls: 'textarea',
height: 40,
width: 300,
fieldLabel: 'Label',
hideEmptyLabel: false,
hideLabel: true

And my CSS is defined as such:

.textarea {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

However, the textfield still has corners. I think I'm doing something wrong and I can't spot it out.

Try this:-

.textarea .x-form-text {
   border-radius: 5px;
}

You need to provide border radius property to the <input> element, but you were trying to set it to component element which contains the <input> element.