How to fix login page border?

Store Design

Topic summary

A user is experiencing visibility issues with borders on their Shopify store’s login and account creation pages. The borders around input fields and buttons are not displaying properly.

Problem Details:

  • Borders missing on login page input fields and buttons
  • Same issue affects the Create Account page
  • Screenshots provided showing the border visibility problems

Solutions Offered:

Multiple developers provided CSS fixes with similar approaches:

  1. Theme.liquid method - Add custom CSS before </body> or </head> tag targeting .customer .field and .customer button classes

  2. Customer.css method - Insert code at bottom of customer.css file using more specific selectors like .customer :is(#customer_login, #create_customer) .field:after

  3. Base.css/theme.css method - Add border styling to .customer .field input at end of stylesheet

All solutions involve adding border: 1px solid #000 to input fields and styling buttons with background colors and box-shadows. Contributors requested the user mark helpful responses and accept a solution once implemented.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1
How to fix the login age broders and button at the headerof the page?Any help will be much appreciated. Many thanks

My store URL: https://kuzushop.com/

issue.PNG
issue.PNG583×542 16 KB

1 Like
2

Having broder issue of Create Account Page as well.

Borders not visible
Borders not visible491×446 6.81 KB

Any help will be highly appreciated.

3

Hello @KuzuRan

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.customer .field { border: 1px solid #000 !important; } .customer button { color: #000 !important; border: 1px solid #000 !important; margin-left: auto !important; margin-right: auto !important; }

techlyser_web_0-1721998314879.png
techlyser_web_0-1721998314879.png737×415 8.86 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

4

Hello @
You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.
  2. Open your customer.css file
  3. Paste the below code from bottom on customer.css
.customer :is(#customer_login, #create_customer) .field:after {
    border-color: #000;
}
.customer :is(#customer_login, #create_customer) button {
    background-color: #000;
}
.customer :is(#customer_login, #create_customer) button:after {
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(243,243,243, calc(1 - 0.3 )), 0 0 0 var(--buttons-border-width) #000;
}

Screenshot 2024-07-27 134104.png
Screenshot 2024-07-27 134104.png680×553 10.3 KB

Screenshot 2024-07-27 134749.png
Screenshot 2024-07-27 134749.png687×508 9.26 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

5

@KuzuRan

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file.
  3. Paste the code below before of the theme.liquid file.
  4. Find the exact class name and Set the suitable font size as you want in the CSS code.

Screenshot:
Login Page: https://prnt.sc/nx3LCp4EyUnS
Register Page: https://prnt.sc/MjYN89Hui6Dl
1 Like
6

@KuzuRan

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file.
  3. Paste the code below before of the theme.liquid file.
  4. Find the exact class name and Set the suitable font size as you want in the CSS code.

Screenshot:
Login Page: https://prnt.sc/nx3LCp4EyUnS
Register Page: https://prnt.sc/MjYN89Hui6Dl
7
  • Here is the solution for you @KuzuRan
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.customer .field input {
    border: 1px solid #5433EB !important;
}
#customer_login button {
     background: #5433EB !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1722074550525.png
BSSTekLabs_0-1722074550525.png929×665 14.2 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.