CODEWITHSUNDEEP
css
Iggy's Pop
Iggy's Pop

Reputation: 599

Can't apply radius to submit button

I am trying to make the borders of my submit button round but it doesn't seem to work when I try this:

input[type="submit"].button2,
button[type="submit"].button2{
  border-radius: 12px;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  border-color: #d21151;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  background-color: #d21151;
  border-radius: 5px;
  letter-spacing: 1px;
  border-width: 1px;
  width: 100px;
  -webkit-transition-duration: 0.4s; 
  transition-duration: 0.4s;
}

Upvotes: 0

Views: 95

Answers (1)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

Your styles are working fine. Here is a demo snippet.

input[type="submit"].button2,
button[type="submit"].button2{

  border-radius: 12px;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  border-color: #d21151;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  background-color: #d21151; 
  letter-spacing: 1px;
  border-width: 1px;
  width: 100px;
  -webkit-transition-duration: 0.4s; 
  transition-duration: 0.4s;
}
<input type="submit" class="button2" />

<button type="submit" class="button2" >submit</button>

Inspect the element and see if any other external CSS rule is applying on it. This can happen if the priority of the other rules are higher than yours.

You have lots of information available over the internet related to CSS priorities, Give yourself some time to have a hold on this topic. Here are few useful links Priority Calculation , Priority Rules

Upvotes: 3

Related Questions