border radius creating a black color

Issue

I am creating a SignUp page in which there are 3 input fields.
After applying the border-radius, black borders are created around the inputs when I didn’t applied border color to black.
Is border-collapse property / border-color is the issue?

After applying border-style:none
enter image description here

so the initial look is like this:-
enter image description here

After applying border-radius,
enter image description here

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.title {
  margin-top: 5%;
}

form {
  margin-top: 10%;
}

.field {
  display: block;
  margin: 0 auto;
  height: 38px;
  width: 20%;
  border-radius: 10px;
}

.email {
  border-radius: initial;
}

.top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.password {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.bottom {
  margin-top: 10px;
  border: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <h2 class="title">Daily Newsletters Mail Service</h2>
  <form action="" method="post">
    <h2>Sign-In</h2>
    <input class="field top" type="text" name="username" autofocus="true">
    <input class="field email" type="email" name="email" placeholder="xyz@email.com">
    <input class="field password" type="password" name="password" placeholder="Yx73@ysd">
    <input class="field bottom" type="submit" name="signup" value="Sign-Up">
  </form>
</body>

</html>

Solution

TL;DR. Set your intended border color to override default

Browsers have a certain default style values per HTML elements (e.g. color, width, margin, etc). Because you define a part of border style set (e.g. border-radius) but not all , the browser simply uses its default values. In this case, the border color of black.

You can just assign your preferred border color and style. See the code snippet below, where I added a border style to input element.

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.title {
  margin-top: 5%;
}

form {
  margin-top: 10%;
}

.field {
  display: block;
  margin: 0 auto;
  height: 38px;
  width: 20%;
  border-radius: 10px;
}

input {
  /* Set your intended border color here */ 
  border: 1px solid #ddd;
}
.email {
  border-radius: initial;
}

.top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.password {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.bottom {
  margin-top: 10px;
  border: 0;
}
<h2 class="title">Daily Newsletters Mail Service</h2>
<form action="" method="post">
  <h2>Sign-In</h2>
  <input class="field top" type="text" name="username" autofocus="true">
  <input class="field email" type="email" name="email" placeholder="xyz@email.com">
  <input class="field password" type="password" name="password" placeholder="Yx73@ysd">
  <input class="field bottom" type="submit" name="signup" value="Sign-Up">
</form>

Answered By – Bumhan Yu

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.