Removing outline from CSS button

Question

Currently my buttons in a drop down menu are showing a black outline around each of the buttons (as pictured), but I am trying to remove them so that the buttons look more integrated with the background (or alternatively make the outline white) so that you can't see it. This is my current html code

   <input type="button" className = 'profiletype' name="profile_type" value={name} onClick={submit}>Social</input>
   <input type="button" className = 'profiletype' name="profile_type" value={name} onClick={submit}>Professional</input>

and this is my CSS code for profiletype

  .profiletype {
  background-color: white;
  font-weight: 300;
  letter-spacing: 1px;
  color: black;
  cursor: pointer;
  text-transform: uppercase;
  margin: 5px;
  text-align: center;
}

and I've attached an image of what it currently looks like. Thanks!:

current image

Answer 1

About that outlining - it is default style for input type="button" applied by the browser. To fix it you can declare your own border style. For example: border:1px solid blue;

.profiletype {
  background-color: white;
  font-weight: 300;
  letter-spacing: 1px;
  color: black;
  cursor: pointer;
  text-transform: uppercase;
  margin: 5px;
  text-align: center;
  border:1px solid blue;
}

<input type="button" class = 'profiletype' name="profile_type" value='Professional' />
 <input type="button" class = 'profiletype' name="profile_type" value='Social' />