skip to Main Content

I am working on a simple login site template using html and css (no js yet) and for some reason when I use the border-color property in my css for the .main class and i use the rgba() function like this:
border-color: rgba(255, 255, 255, 0.5);
the rgb works but the alpha does not at all.

I tried doing this instead and i also removed the original line:
border: 60px solid rgba(255, 255, 255, 0.5);

I am using chrome version 108.

html {
  height: 100%;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-image: linear-gradient(red, lime);
}

.main {
  margin: 60px;
  border: 60px solid;
  border-color: rgba(255, 255, 255, 0.5) !important;
  /* Set border opacity */
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.8);
}

.main input {
  border-radius: 10px;
  height: 30px;
  background-color: lightgray;
}

.main input:focus {
  background-color: white;
}

.main button {
  height: 30px;
  border-radius: 15px;
}
<center>
  <div class="main">
    <h1>Login</h1>
    <p>Hello! To continue please log into our service:</p>
    <h2>Email</h2>
    <input type="email">
    <h2>Password</h2>
    <input type="password">
    <br>
    <br>
    <button type="button" onclick='alert("logging in...")'>Login</button>
  </div>
</center>

2

Answers


  1. I took a look and there’s no issue.
    You created two styles very similar and with 50% or more of opacity:

    border-color: rgba(255, 255, 255, 0.5)
    background-color: rgba(255, 255, 255, 0.8)
    

    I suggest you to create a good contrast between the .main background and border.

    In front-end, you will need to learn about design too. So, one of the videos I suggest you to learn how to manage colors is: https://youtu.be/Qj1FK8n7WgY?list=PLAiIx7LPQuH3FN2B2oBNiWhPCBC2NdqDe

    I believe that a better contrast between the background and border, and an opacity below 50% will solve your problem.

    Login or Signup to reply.
  2. You need to add background-clip: padding-box; to limit the background to padding area and not have it under your border-color:

    html {
      height: 100%;
      width: 100%;
      font-family: Arial, Helvetica, sans-serif;
      background-image: linear-gradient(red, lime);
    }
    
    .main {
      margin: 60px;
      border: 60px solid;
      border-color: rgba(255, 255, 255, 0.5);
      /* Set border opacity */
      border-radius: 30px;
      background-color: rgba(255, 255, 255, 0.8);
      background-clip: padding-box
    }
    
    .main input {
      border-radius: 10px;
      height: 30px;
      background-color: lightgray;
    }
    
    .main input:focus {
      background-color: white;
    }
    
    .main button {
      height: 30px;
      border-radius: 15px;
    }
    <div class="main">
        <h1>Login</h1>
        <p>Hello! To continue please log into our service:</p>
        <h2>Email</h2>
        <input type="email">
        <h2>Password</h2>
        <input type="password">
        <br>
        <br>
        <button type="button" onclick='alert("logging in...")'>Login</button>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search