CODEWITHSUNDEEP
htmlcssbutton
cucuru
cucuru

Reputation: 3718

How to change the default button border using CSS?

I have a button in my form, and would like to change its default border.

I can't remove the default and add mine, I have both or none

button.boton{
   cursor: pointer; 
   position: relative;
   background:red;
   border:none; /*delete the default one*/
   border: 1px solid blue; /*add my own border */
}

how can I do this?

Upvotes: 0

Views: 6917

Answers (3)

Jad Chahine
Jad Chahine

Reputation: 7159

Use class identifier to let the style be applied on your button:

CSS Code:

button.boton{
   cursor: pointer; 
   position: relative;
   border: 1px solid blue; /*add my own border */
}

HTML Code:

<button class="boton"> Button </button>

Also try this jsfiddle link

EDIT:

Here is a screenshot of the output file in internet explorer version 11

enter image description here

For IE9 :

If you specify 3 of the borders, those borders will render in IE9. Once you specify the 4th border, IE9 refuses to render any of the borders

button.boton{
       cursor: pointer; 
       position: relative;
       border-top: 1px solid blue;
       border-right: 1px solid blue;
       border-bottom: 1px solid blue;
    }

Upvotes: 2

jdabrowski
jdabrowski

Reputation: 1985

Try adding this to the CSS:

-webkit-appearance:none;

And make sure nothing else is adding a border around your button.

Upvotes: 1

Wowsk
Wowsk

Reputation: 3675

You do not need to set the border twice. When you set the border it will remove all properties that were previously set.

Upvotes: 0

Related Questions