saXat saXat - 3 months ago 10
HTML Question

How to remove the border line around the element in html and css?

the line around the blue box

There is a line around the blue box. How can I remove it and just get the clean rounded box?
I have tried

{
border: none;
outline: none;
}


but it doesn't work. I rounded the corners and then the line appeared which seems to be the outline when the corners are not rounded.

Here is my css and html code:



body,html{
height: 100%;
color: #777;
line-height: 1.8;
margin: 0;
padding: 0;
}


.bgimg{
background-image: url(room1.jpg);
min-height: 100%;
opacity: 0.2;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.Sign-In{
background-color: steelblue;
color: black;
opacity: 1;
position:absolute;
top:25%;
left:37%;
text-align: center;
border-radius: 15px;
font-family: cursive;
width: 300px;
}

.marg{
margin-top: 15px;
}

#button{
margin-bottom: 15px;
padding: 10px;
margin-top: 30px;
border-radius: 10px;
}

.box{
border-radius: 10px;
width: 200px;
text-align: center;
border: none;
height: 15px;
}


<!DOCTYPE HTML>
<html>
<head>
<title>Sign-In</title>
<link rel="stylesheet" type="text/css" href="2.css">
</head>

<body>
<div class="bgimg">
</div>
<div class="Sign-In">
<fieldset>
<h2>LOG-IN</h2>
<form method="POST" action=""> User <br>
<input type="text" name="user" size="40" class="box">
<div class="marg"> Password </div>
<input type="password" name="pass" size="40" class="box"><br>
<input id="button" type="submit" name="submit" value="Log In">
</form>
</fieldset>
</div>
</body>
</html>




Answer

It's the fieldset, it has a border by default.

fieldset {
    border: 0px;
}

You can read more about the styling of form / fieldset / etc elements here