Design a Contact Form - Design a Contact Form

HTML-CSS
1

Tell us what’s happening:

hello guys,

I tried giving my input and text area some border radius but it keeps giving me a bold black colour at the input borders without giving me the effect of the radius. Tried using background-clip with a value of padding box but not working too. What do i do?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Contact Form</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="form-container">
<form>
    <h2> Contact Us</h2>
    <label for="name">Name:<input type="text" id="name" name="name" required/> </label> 
       <label for="mail">Email:<input type="email" id="mail" name="mail" required/></label>    <label for="message">Message;
           <textarea type="text"id="message" name="Zmessage" placehlder="What id on your mind...." rows=3 cols=25 required></textarea>
       </label>    <label>

  <button type="submit">Submit</button>
          
       </label>




       


    

    </form>

    </div>

</body>

</html>

/* file: styles.css */
body{ 
  background-color: #e2e5e3;
  width:100%;
  margin: 0 auto;
  font-family: tahoma, sans-serrif;}

  h2{text-align: center;}

.form-container{
  background-color: #ffffff;
  width: 50%;
  margin: 10px auto;
  border-radius: 10px;
  border: 3px solid white; 
  padding: 1.1rem;
  height: 80vh;}

  label{
    display: block;
    color: black;;   margin: 5px 5px;

  }

  input, textarea{
    
    width: 100%;
    padding: 0.2px;
    margin-bottom: 20px;
    height: 50px;
border-radius: 2px;
  }

  button{
background-color: green;
color: white;
display: block;
margin: auto;
border-radius: 2px;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

Design a Contact Form - Design a Contact Form

2

Hey,
If your problem is the radius only, then it’s not a problem. 2px is too small; if you increase it to 5 or 10, it will be visible.
If your problem is the black border color, you can use the border property to give it any border color you want. You can also try outline:none; to remove the black outline.
Good luck!

1 Like