Weird divided border around button, what is making it?

Question

Getting this weird border around a button, tried to delete one by one line of all the div that the button is included in, found out that only thing affecting it is by giving it a background color?

Tried going over and delete one by one line with background color activated, maybe it just doesn't show without, but i couldn't find anything, and nor do I have any idea how it is possible to make divided border with two different colors.

Here is the content in the class for the button:

.btn{
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 16px;
  text-align: center;
  background-color: rgba(19,106,0,1.00);
  border-radius: 25px;
  transition: all 0.3s ease 0s;
  color: #fff;
  margin-right: 20px;
}

It is also inside body, form class and form content, and wrapper (in case that can affect it):

body{
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #FFF;
  font: 14px "Montserrat", "Myriad Pro";
}

.wrapper{
width: 450px;
    background-color: #FFF;
    padding: 10px;
    margin: 10px auto;
    border: none;
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    min-height: 100%;
}

.formlog{
  width: 100%;
  max-width: 450px;
  padding: 15px;
  margin: auto;
}

#formcontent{
 -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  background: #FFF;
  padding: 30px;
  width: 90%;
  max-width: 450px;
  position: relative;
  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  text-align: center;
}
```

atultw · Answer 1 · 2021-05-13T22:27:10.063

0

That's expected behavior. You can set the border style to solid if you want a solid border:

.btn{
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 16px;
  text-align: center;
  background-color: rgba(19,106,0,1.00);
  border-radius: 25px;
  transition: all 0.3s ease 0s;
  color: #fff;
  margin-right: 20px;
  /* This sets the border to be solid */
  border-style: solid;
}

<button class="btn">Click Me</button>

Further reading about browser defaults: Browsers' default CSS for HTML elements

edited May 13 '21 at 22:27

answered May 13 '21 at 14:10

atultw

921
7
15

Where is the color of the border specified? Is the grey colors just standard or have I done it somewhere? – lutly May 13 '21 at 14:28
@lutly the gray border color is a browser default. You can configure it using `border-color` property. I've added a reference to the answer :) – atultw May 13 '21 at 22:26

score 0 · Answer 2 · answered May 13 '21 at 14:28

Your browser has a default stylesheet, which sets an outset border on buttons. Here's some code to demonstrate outset and inset borders.

For documentation, see eg https://css-tricks.com/almanac/properties/b/border/#values or https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=outset

button {
    
  font-size: 16px;
  text-align: center;
  background-color: rgba(19,106,0);
  border-radius: 25px;
  color: #fff;
    
  border-style:outset; /* <-- explicitly set what the browser sets implicitly */
  border-color: rgb(118, 118, 118); /* <-- explicitly set what the browser sets implicitly */
  
    
}

button.btn2 {
  border-style:inset;
}

button.btn3 {
  border-style:none;
}

button.btn4 {
  border-style:solid;
}

<button class="btn">outset border</button>

<button class="btn2">inset border</button>

<button class="btn3">no border</button>

<button class="btn4">solid border</button>

Weird divided border around button, what is making it?

2 Answers2