How do I remove the <input type="reset"> border without removing my css border?

Question

#botoes {
  width: 270px;
  margin-left: 20px;
}

#botao {
  float: right;
  padding: 5px;
  15px;
  font: bold 12px sans-serif;
  border-radius: 20px;
  box-shadow: 0px 1px 0px white;
  border: 1px solid #9eb9c3;
  background: #edf6f9;
  background: -webkit-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -moz-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -o-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: linear-gradient(#edf6f9 0%, #cde5ee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee', GradientType=0);
  color: #527988;
  box-shadow: 0px 0px 10pc #c9c9c9
}

#botao:hover {
  background: #cde5ee;
  background: -moz-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: -webkit-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: linear-gradient(to bottom, #cde5ee 0%, #edf6f9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9', GradientType=0);
  cursor: pointer;
}

<div id=botoes>

  <div id="botao">
    <input type="submit" name="enviar" value="Enviar">
  </div>

  <div id="botao">
    <input type="reset" name="limpar" value="Reset">
  </div>

  <div id="lembrar-senha">
    <input type="checkbox" />Lembrar senha
  </div>

Answer 1

Just in the first line of your CSS you put it like this

[type="reset"] {
  all: unset;
}

To the IE You can do it that way since he doesn’t accept the unset (source)

[type="reset"] {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

The important thing is that these styles come right at the beginning of your CSS, before the custom styles you’ve put.

That way you reset all default values of this type of input, then you put the styles you want. OBS: Notice that I have not cleaned the styles of btn type="submit" for you to see the difference between one and the other.

See Example applied with your code.

/* reseta estilos desse input */
[type="reset"] {
  all: unset;
}
  
  #botoes{
width:270px;
margin-left:20px;

}
#botao{
float:right;
padding:5px 15px;
font: bold 12px sans-serif;
border-radius:20px;
box-shadow:0px 1px 0px white;
border:1px solid #9eb9c3;

background: #edf6f9;
background: -webkit-linear-gradient(#edf6f9 0%, #cde5ee 100%);
background: -moz-linear-gradient(#edf6f9 0%, #cde5ee 100%);
background: -o-linear-gradient(#edf6f9 0%, #cde5ee 100%);
background: linear-gradient(#edf6f9 0%, #cde5ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee',GradientType=0 );
color:#527988;
box-shadow:0px 0px 10pc #c9c9c9
}

#botao:hover{
background: #cde5ee;
background: -moz-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
background: -webkit-linear-gradient(top, #cde5ee 0%,#edf6f9 100%);
background: linear-gradient(to bottom, #cde5ee 0%,#edf6f9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9',GradientType=0 );
cursor:pointer;
}

<div id=botoes>
      
  <div id="botao">      
        <input type="submit" name="enviar" value="Enviar">
    </div>
  
  <div id="botao">
        <input type="reset" name="limpar" value="Reset">
  </div>

    <div id="lembrar-senha">
      <input type="checkbox"/>Lembrar senha
    </div>

</div> 

There are other ways to fix this, but this I find the most practical, because it cleans the styles of user-agent and vc can get "from scratch" the styles of your element.

Answer 2

The ideal would be to style the element itself instead of creating a wrapper to the reset, This only tends to complicate more how you’re applying styling to the elements. At first, if it is only the border mentioned in the question, simply remove the edge (from the child element) and inherit the property values background and cursor of the parent element:

input[type='reset']{
  border: none;
  background: inherit;
  cursor: inherit
}

You can read more about inherit in that reply.

#botoes {
  width: 270px;
  margin-left: 20px;
}

#botao {
  float: right;
  padding: 5px;
  15px;
  font: bold 12px sans-serif;
  border-radius: 20px;
  box-shadow: 0px 1px 0px white;
  border: 1px solid #9eb9c3;
  background: #edf6f9;
  background: -webkit-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -moz-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -o-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: linear-gradient(#edf6f9 0%, #cde5ee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee', GradientType=0);
  color: #527988;
  box-shadow: 0px 0px 10pc #c9c9c9
}

#botao:hover {
  background: #cde5ee;
  background: -moz-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: -webkit-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: linear-gradient(to bottom, #cde5ee 0%, #edf6f9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9', GradientType=0);
  cursor: pointer;
}

input[type='reset']{
  border: none;
  background: inherit;
  cursor: inherit
}

<div id=botoes>

  <div id="botao">
    <input type="submit" name="enviar" value="Enviar">
  </div>

  <div id="botao">
    <input type="reset" name="limpar" value="Reset">
  </div>

  <div id="lembrar-senha">
    <input type="checkbox" />Lembrar senha
  </div>