CSS Button Border not working for some reason

Question

I have added border to the css button but for some reason, it is not taking effect.

Can someone please suggest a fix, Attaching the code in snippets

body {
  background: grey;
}

a.button {
  display: inline-block;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  background-color: black;
  border: 1px solid white;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS BUTTON</title>
</head>
<body>
<a href="#test" class="button">Click Me</a>
</body>
</html>

@EternalHour yep. Currently the background is white. Although don't think border is not visible due to what. I tried changing the background color to dark color and still border wasn't visible — Badal Singh, Sep 03 '19 at 04:27
Well if your border is the same color as the background it won't be visible. Your rule looks correct. — EternalHour, Sep 03 '19 at 04:28
@EternalHour i changed the background color. Still white border is not visible at all — Badal Singh, Sep 03 '19 at 04:29
It is working fine for me on firefox, could be browser specific. https://jsfiddle.net/5zeLo97q/ — EternalHour, Sep 03 '19 at 04:30

score 5 · Accepted Answer · answered Sep 03 '19 at 04:31

Use -webkit-appearance: none; to turn off iOS default button styling, not "button". A great article here. And I've attached code for your button to work:

body {
background: blue;
}

a.button {
  display: inline-block;
  /*-webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;*/
  -webkit-appearance: none;
  text-decoration: none;
  background-color: black;
  border: 1px solid white;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}

<a href="#test" class="button">Click Me</a>

Cool @BadalSingh vote up my answer if you reckon it's the correct one. — Nathaniel Flick, Sep 03 '19 at 04:45

score 2 · Answer 2 · answered Sep 03 '19 at 04:37

2

When you remove the property -webkit-appearance: button; or set to 'none' the button takes the effect. I think that appearance properties do not take border effects

answered Sep 03 '19 at 04:37

a n

72
9

score 2 · Answer 3 · answered Sep 03 '19 at 04:59

When using the -webkit-appearance property it's purpose is to provide the browser a way to display an element using platform-native styling based on the operating system's theme.

This leads to the operating system's styling interfering with your custom css. To apply custom styling you want to set -webkit-appearance to none in addition to your custom css.

Here's how you can use custom styling:

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
}

input[type="checkbox"] {
    border: 2px solid #555;
    width: 20px;
    height: 20px;
    outline: none;
    padding: 4px;
}
input[type="checkbox"]:checked {
    background: #555;
    background-clip: content-box;
}
input[type="radio"] {
    border: 2px solid #555;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    outline: none;
    padding: 4px;
}
input[type="radio"]:checked {
    background: #555;
    background-clip: content-box;
}
p, h3 {
    color: #333;
    font-family: helvetica, arial;
}
label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 -2px 8px;
}

<h3>Check:</h3>
<p><input type="checkbox"></input><label>Include Options</label></p>
<h3><br/>Select one:</h3>
<p><input type="radio" name="radio"></input><label>Option A</label></p>
<p><input type="radio" name="radio"></input><label>Option B</label></p>

score 1 · Answer 4 · answered Sep 03 '19 at 04:31

You are making button to -webkit-appearance-button so that makes border not visible.

a.button {
  display: inline-block;
  text-decoration: none;
  background-color: black;
  border: 5px solid red;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS BUTTON</title>
</head>
<body>
<a href="#test" class="button">Click Me</a>
</body>
</html>

CSS Button Border not working for some reason

4 Answers4