CSS: syncing up a border with a rounded edged button

Question

My code so far allows me to click on a button with rounded edges as I have applied the border-radius feature. However, when I click on the button the borer is still squared and so looks horribly out of sync.

Can be seen here:

http://www.tiikoni.com/tis/view/image.php?id=23d3264

this is the css for the button:

.submitToDoButton {
    background: lightgray;
    font-size: 20px;
    color: red;
    padding: 2px;
    width: 100px;
    border-radius: 25px;
}

this is what I thought would be the code to change the border aka set it to the same radius:

.submitToDoButton:active{
    border-radius: 25px;
}

but this does nothing

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a link to an example, if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D, Nov 26 '15 at 13:32
This image will be offline in a day. Please add the code to the question. — Wavemaster, Nov 26 '15 at 13:38
Skip the whole `:active` rule and add `outline: none` to the main class. — Asons, Nov 26 '15 at 13:40
http://stackoverflow.com/questions/1418766/changing-color-of-rounded-corners-button-with-css Go through this stackoverflow links will help u — Upendrasinh Jadeja, Nov 26 '15 at 13:50

Wavemaster · Accepted Answer · 2015-11-26T13:45:12.983

2

You could try outline: none; to the main button class:

.submitToDoButton{
    border-radius: 25px;
    outline: none; /* add this */
}

If you do want an effect similar to outline but to look good, you can use the box-shadow property.

edited Nov 26 '15 at 13:45

answered Nov 26 '15 at 13:36

Wavemaster

1,794
16
27

your solution works better than mine but still not perfect. whilst the button is active/pressed there is no issue but after clicking then a square border pops up and remains. is there a property after clicked? – The Hurricane Nov 26 '15 at 13:42
Use outline: none on .submitToDoButton. I've edited my answer. – Wavemaster Nov 26 '15 at 13:44
works and accepted. but there must be a way to have an outline – The Hurricane Nov 26 '15 at 13:53
Use `box-shadow` as Alexander Erlandsson has suggested. – Wavemaster Nov 26 '15 at 14:12

score 0 · Answer 2 · answered Nov 26 '15 at 14:09

You won't be able to solve this with border-radius and outline. To get the result you are looking for you need to make a box-shadow looking the same as the outline on :focus.

.submitToDobutton:focus {
     box-shadow: 0 0 5px blue;
}

I am not sure about the outline color, but you'll probably have to change 'blue' to the correct color.

CSS: syncing up a border with a rounded edged button

2 Answers2