I have multiple segments in a progress bar, in this example representing two states - achieved and planned values. The planned segment should have a border and nearing the end of the progress bar it should get the same border-radius…
I am creating a "Side by Side" component. I am designing it in a way where the text and image should be swap-able. Currently the inside border radius is hard coded as follows: .side-by-side:has(img) { img { border: none; border-radius:…
I need some help with building a user interface for my app. While browsing Dribbble, I came across a design that I think would be simple and fast to replicate. However, I'm struggling with creating a Container that has a…
I want to create a box that only has a border on the left and right and a radius on all corners. The borders should also have different colors. In Chrome, the corners are displayed correctly, except for the small…
I have a layout with a div which has rounded corners filling the whole screen (to get the look and feel of some member or credit card). So in a simplified way it's just .card { border: 1px solid black;…
I want to align the borders where it says 'Entrar,' and the 'Entrar' button also needs to log in if the user exists. The 'Novo Aqui?' button doesn't redirect to another page called 'Cadastro' and doesn't look like a button;…
Here is the css body { font-family: sans-serif; border: solid 1px; padding: 10px; border-radius: 20px; box-shadow: rgb(195, 197, 199) 0px 23px 0px -15px, rgb(217, 217, 213) 0px 45px 0px -30px; } The border radius on the second layer is not…
I need to create a border color gradient, but doesn't effect color in content inside. <div className="parent background red"> <div className="box"> <div className="content"> Happy coding </div> </div> </div> //css .parent{ background: red; } .box { position: relative; border-image: linear-gradient(#f6b73c, #4d9f0c)…
I am building this main nav bar, as the active/hover state I need to get the border bottom in color. My problem is how could I round the inner top corners? I understand that I could create an element, add…
I just need a div who has some height and width and contain some text inside it and it should be transparent background and also border with gradient and border-radius i have tried many ways but nothing is wroking there…