Dealing with the issue of achieving transparency in linear-gradient borders using

Can anyone help me understand why the bottom left and right edge borders are fading in my design? I want to work on this picture, but I can't figure out why the border-radius in my code is fading.

Click here for image Click here for image

 <div class="navCenter">
                <button class="btn-loging"><span style="color: white;">LOGIN</span></button>
            </div>

.navCenter {
  width: 228px;
  height: 73px;
  position: absolute;
  left: 847px;
  display: flex;
  border-left:1px solid ;
  border-right:1px solid ;
  border-bottom:1px solid;
  border-image: linear-gradient(180deg, rgba(232, 232, 232, 0.308), rgba(232, 232, 232, 1)) 1;
  border-radius: 0px 0px 15px 15px;
  opacity: 0.57;
  align-items: center;
  background: radial-gradient(48.32% 109.64% at 50% 49.4%, rgba(231, 231, 231, 0.22) 0%, rgba(0, 0, 0, 0.00) 100%), rgba(255, 255, 255, 0.04);
  justify-content: center;
}

.btn-loging {
  width: 93px;
  height: 38px;
  background: linear-gradient(135deg, #e5a475, #e5a47500);
  font-weight: bolder;
  border-radius: 5px;
  border-color: #e5a475;
  border-width: 1.5px;
  box-shadow: 0px 0px 24px 0px #e5a47555;
}
htmlcssborder

Answer №1

It may not be achievable with border-radius alone. Here is a clever workaround to achieve a similar effect:

body {
  background: #333;
}
.navBorder {
  background: linear-gradient(180deg, rgba(232, 232, 232, 0.1), rgba(232, 232, 232, 1));
  width: 228px;
  height: 73px;
  position: absolute;
  left: 20px;
  opacity: 0.57;
  border-radius: 0 0 15px 15px;
  overflow: hidden;
}
.navBackground {
  background: #333;
  position: absolute;
  left: 1px;
  top: 0;
  width: calc(100% - 2px);
  height: calc(100% - 1px);
  border-radius: 0 0 15px 15px;
  overflow: hidden;
}
.navCenter {
  position: absolute;
  left: 1px;
  top: 0;
  width: calc(100% - 2px);
  height: calc(100% - 1px);
  display: flex;
  align-items: center;
  background: radial-gradient(48.32% 109.64% at 50% 49.4%, rgba(231, 231, 231, 0.22) 0%, rgba(0, 0, 0, 0.00) 100%), rgba(255, 255, 255, 0.1);
  justify-content: center;
  border-radius: 0 0 15px 15px;
  overflow: hidden;
}

.btn-loging {
  width: 93px;
  height: 38px;
  background: linear-gradient(135deg, #e5a475, #e5a47500);
  font-weight: bolder;
  border-radius: 5px;
  border-color: #e5a475;
  border-width: 1.5px;
  box-shadow: 0px 0px 24px 0px #e5a47555;
}
<div class="navBorder">
  <div class="navBackground">
    <div class="navCenter">
      <button class="btn-loging"><span style="color: white;">LOGIN</span></button>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to eliminate browser-saved password suggestions using Material UI textfields?

"Is there a way to prevent browser suggestions in a Textfield within a form tag so that users must manually type their password without autocomplete options?" https://i.sstatic.net/Mub57.png "I attempted to use the 'autocomplete=" ...

cssreactjsbrowsermaterial-ui

Search for "conditions" in a basic HTML DOM parser

I encountered an issue when trying to parse information from a website using simple HTML DOM parser. My code looks something like this: <li> <p class="x"></p><p>..</p> <p>..</p> <p>..</p> <p class ...

phphtmlparsingdom

JavaScript code to make titles slide in as the user scrolls

Looking for a better way to make all titles slide in upon scrolling instead of coding individually? Consider using a forEach loop! Here's how you can modify the code below: function slideInLeft() { document.querySelectorAll('.subtitle-left ...

javascripthtmlcssfor-loopforeach

jQuery does not support iterating over JavaScript objects

Here is the code snippet I am working with: $(obj).each(function(i, prop) { tr.append('<td>'+ i +'</td>' + '<td>'+ prop +'</td>'); }); Intriguingly, the data in $(obj) appears as: Obje ...

javascriptjqueryhtml

Angular causing alignment issues for items not centered

I'm having trouble centering the contents of a div with my code. The properties I am applying don't seem to work. Any idea why this is happening? <div class='center'> <form (ngSubmit)="loginUser()" style="background: steel ...

cssangular

Issues regarding the sizing of fonts on mobile devices

Struggling to create a responsive site that looks good on high dpi mobile devices? You're not alone. No matter how you adjust your h2 and p text sizes, they seem to be the same size when viewed in portrait mode on certain devices like the Galaxy S4. E ...

androidhtmlcss

Having difficulty positioning content inside a div element

I am working with a set of three divs, each containing a .header class and a .content class. While I have managed to align the .header class correctly, I am facing an issue with aligning the .content class below the header with 10-15px padding on all sides ...

htmlcss

Employing jQuery, how can one assign attributes to appended HTML and store them

So, I am currently working on a backend page for managing a blog. This page allows users to create, edit, and delete articles. When the user clicks the "edit" button for a specific article named 'foo', the following actions are performed: The ...

javascriptjqueryhtml

I am currently in the process of creating a website navbar with HTML and Tailwindcss, but unfortunately, I am running into issues with the desired functionality not being

Even after trying the group-hover:block technique, I am still unable to see the dropdown menu when hovering over the solution and resources. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

htmlcssheadertailwind-cssnavbar

Unlock the secrets of programming with the must-have guide to mastering variables

As a newcomer to the world of programming, I may be jumping ahead by asking this question too quickly. While reading a book, I came across something that confused me. Why is it necessary to create a variable for the password box element? Wouldn't the ...

javascripthtml

Enhance the HTML content using a JavaScript function

Here is the code that I have: <label>Brand</label></br> <select name="brand" id="brand" onChange="changecat(this.value);"> <option value="" selected>Select Brand</option> <option value="A">AMD</option&g ...

javascripthtml

How can we improve our vertical division method?

Looking for a more efficient way to create a vertical divider between two divs. I want the divider to be centered between the "why choose" and "gallery" sections. Here is an example of what I'm trying to achieve. I've attempted the following co ...

htmlcss

Retrieving Data from Web using Python Selenium

I've been trying to extract information from a website (snippet provided below) The process involves entering data, moving to another page for more inputs, and eventually displaying a table. However, I'm encountering an issue at this stage: dri ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Give a class to the element contained within an anchor tag

One way to add a class to the <a>-tag is through this line of code. $("a[href*='" + location.pathname + "']").addClass("active"); However, I am looking to add the class to an li element inside the <a>-tag. What would be the best ap ...

javascripthtml

Using the symbol for pi in a JavaScript program rather than its numerical value, while still performing calculations with the numerical value behind the scenes

I am working on a calculator project where I want the symbol for pi to be displayed instead of the numerical value. Here is the relevant function: function Pi(pi) { document.getElementById('resultArea').innerHTML += pi; eval(document.ge ...

javascripthtml

What is the best way to arrange these divs one on top of another?

I have combed through numerous resources but still haven't found a solution to my problem. I am struggling with figuring out how to stack the "top_section" div on top of the "middle_section" div. Currently, "middle_section" is appearing above "top_sec ...

htmlcss

Tips for switching the background image in React while a page is loading?

Is there a way to automatically change the background of a page when it loads, instead of requiring a button click? import img1 from '../images/img1.jpg'; import img2 from '../images/img2.jpg'; import img3 from '../images/img3.jpg& ...

javascripthtmlcssreactjs

Display a snippet of each employee's biography along with a "Read More" button that will expand the content using Bootstrap, allowing users to learn more about each team

I have successfully developed a Google App Script that links to a Google Sheet serving as a database. The application iterates through each row, and I showcase each column as part of an employee bio page entry. ex. Picture | Name | Title | Phone | Email ...

htmlcssarraysbootstrap-4

Display the tooltip only when the checkbox is disabled in AngularJS

My current setup includes a checkbox that is disabled based on a scope variable in Angular. If the scope variable is true, the checkbox stays disabled. However, if the scope variable is false, the checkbox becomes enabled. I am looking to implement a too ...

javascripthtmlangularjs

Issues with the appearance of CSS styles on a Firebase site

After deploying a SPA in Firebase, I noticed that the CSS styles only appear correctly after refreshing the browser. I have created a short video demonstrating the issue: https://www.youtube.com/watch?v=dIuQ-axizj8 This is my firebase.json configuration: ...

cssreactjsfirebasemern