saXat saXat - 1 year ago 63
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:

height: 100%;
color: #777;
line-height: 1.8;
margin: 0;
padding: 0;

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

background-color: steelblue;
color: black;
opacity: 1;
text-align: center;
border-radius: 15px;
font-family: cursive;
width: 300px;

margin-top: 15px;

margin-bottom: 15px;
padding: 10px;
margin-top: 30px;
border-radius: 10px;

border-radius: 10px;
width: 200px;
text-align: center;
border: none;
height: 15px;

<link rel="stylesheet" type="text/css" href="2.css">

<div class="bgimg">
<div class="Sign-In">
<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">

Answer Source

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