'border radius creating a black color

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

so the initial look is like this:-

After applying border-radius,

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/[email protected]/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="[email protected]">
    <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>

html css frontend

Solution 1:^[1]

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="[email protected]">
  <input class="field password" type="password" name="password" placeholder="Yx73@ysd">
  <input class="field bottom" type="submit" name="signup" value="Sign-Up">
</form>

Solution 2:^[2]

Refer Here

As said in reference,chrome in default sets, border-style:inset;.
This doesn't trigger on the first photo (without border-radius) as you have not included any border-related styles to input, like you didn't use border/border-radius/border-color/border-width/border-style,
But on second photo as you used border-radius,
other styles like border-colour,and border-style:inset; have triggered.
You can overcome this by adding border-style:solid;

Example

#nobordered {
  height: 38px;
}

#bordered {
  height: 38px;
  border-style: solid;/*main*/
  border-radius: 10px;/*your need*/
  border-width: thin;/*replicating*/
}

<input id="nobordered" type="text" placeholder="without border radius">
<input id="bordered" type="text" placeholder="with border radius">

Why is this better:
This is better as you don't need to set border color,it sets its default border color

Solution 3:^[3]

Adding styling for inputs:

input { border:none; } will get rid of them altogether

or input { border:1px red solid } will give a red border to each.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Bumhan Yu
Solution 2	Neptotech -vishnu
Solution 3	Emil

'border radius creating a black color

Solution 1:[1]