How to change the default button border using CSS?

Question

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?

Are you wondering about the blue outline that occurs in Chrome when you click on the button? — Wowsk
– Wowsk, Commented Mar 8, 2016 at 12:01
oh yes, it didnt work because a filter I add in my original css — cucuru
– cucuru, Commented Mar 8, 2016 at 12:04

Jad Chahine · Accepted Answer · 2016-03-08 16:18:40Z

2

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

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;
    }

edited Mar 8, 2016 at 16:18

answered Mar 8, 2016 at 12:13

Jad Chahine

7,2179 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cucuru Over a year ago

it works in chrome but it doesnt in internet explorer

Jad Chahine Over a year ago

in internet explorer 11.0 it is working, you can see my updated answer, also try to upgrade your internet explorer

cucuru Over a year ago

add a background it will stop working. I need it working since IE 9

Jad Chahine Over a year ago

for IE9,you should specify only 3 of the borders, those borders will render in IE9, check now the answer.

jdabrowski · Accepted Answer · 2016-03-08 12:01:47Z

1

Try adding this to the CSS:

-webkit-appearance:none;

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

answered Mar 8, 2016 at 12:01

jdabrowski

2,00515 silver badges21 bronze badges

Comments

Wowsk · Accepted Answer · 2016-03-08 12:00:45Z

0

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

answered Mar 8, 2016 at 12:00

Wowsk

3,6852 gold badges20 silver badges30 bronze badges

1 Comment

cucuru Over a year ago

I know that, but it's not working in internet explorer and it was just a try!

Collectives™ on Stack Overflow

How to change the default button border using CSS?

3 Answers 3

EDIT:

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

EDIT:

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related