Question

While everyone else loves those rounded corners and asks how to make them, I have to get rid of them for my case. The iPhone renders my HTML elements with rounded corners. Is there any way to prevent this?

The below image shows example controls.

The HTML code is roughly

<input class="text" type="text"/>
<input class="button" type="button"/>

The CSS code is roughly

.text {
  border: 1px solid #aabbcc;
  height: 2em;
  width: 100%;
}

.button {
  border: 1px solid #ffffff;
  background-color: #385070;
  color: #ffffff;
  font-weight: bold;
  height: 2.2em;
}

Answer 1

input {
    -webkit-border-radius: 0;
}