# Button Border Colour? **URL:** \ **Category:** Elements\ **Created:** [April 9, 2025, 5:43pm UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094 "2025-04-09T17:43:31Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [April 9, 2025, 5:43pm UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/1 "2025-04-09T17:43:31Z")
I noticed this when trying out and using a button in the new modal but it is also occurring with a button just on its own. It seems to have a phantom inner blue border, not set in the settings? ![CleanShot 2025-04-09 at 18.36.34](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/a/1a3d4b4d14dc243679ae5e81d09a0477caf04e83.png) ![CleanShot 2025-04-09 at 18.36.50](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/d/5d9685472f862f8466d15ae5eb12e05e90da796f.png) Is this a bug or may I have got something set wrong? PS. The colours are just to highlight the point! šŸ˜‰ ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [April 9, 2025, 6:05pm UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/2 "2025-04-09T18:05:48Z")
Iā€™m guessing you have the button selected šŸ˜‰ (and labels are off in the editor). ![CleanShot 2025-04-09 at 7 .06.24@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/a/eab417a48ac1c827d9f64c2a639927dd5468138c.png) Try selecting a different component on the pageā€¦ ![CleanShot 2025-04-09 at 7 .07.09@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/9/19f12718c4291ea55e01ff92ad05e0b73505e2f6.png) ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [April 9, 2025, 6:07pm UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/3 "2025-04-09T18:07:04Z")
> [@dan](#): > > Iā€™m guessing you have the button selected šŸ˜‰ (and labels are off in the editor). I guess you are right! šŸ˜³ ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [April 9, 2025, 6:07pm UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/4 "2025-04-09T18:07:55Z")
haha, easily done šŸ¤£ ---
**Author:** ![6harps](https://avatars.discourse-cdn.com/v4/letter/6/c5a1d2/32.png) [@6harps](https://forums.realmacsoftware.com/u/6harps)\ **Post date:** [August 9, 2026, 3:27pm UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/5 "2026-08-09T15:27:09Z")
I have this same problem with a phantom blue border, - but it appears on the published website! Strange enough only on the first button in a menu-list with several buttons. the others are ok. How can I get rid of it? Please have a look at it on a mobile view: [https://test2.riccardodelfino.eu](https://test2.riccardodelfino.eu) and have a look at my screenshots. Thank you for any help or suggestions! ![Bildschirmfoto 2026-08-09 um 17.18.33](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/8/48dbf7ceb05d08607d4c0518d014d7f083d3c3ea.png) ![Bildschirmfoto 2026-08-09 um 17.18.54](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/0/e0999bc5498ad616c530ddc77527776bd930223f.png) ![Bildschirmfoto 2026-08-09 um 17.19.14](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/8/389d4e6ae5dac854e01a5f4508b2ede69f4112c0.png) ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [August 10, 2026, 7:30am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/6 "2026-08-10T07:30:42Z")
> [@6harps](#): > > I have this same problem with a phantom blue border, - but it appears on the published website! Strange enough only on the first button in a menu-list with several buttons. the others are ok. How can I get rid of it? This is an outline for accessibility. It depends how which component youā€™re using to create that menu, but the following tailwind class will remove the blue outline: `outline-0` I canā€™t quite tell from your site which combination of components youā€™re using to create that menu, so if youā€™re not sure where to add that class, can you post a screenshot of the tree structure of the page or send me a link to your project file? šŸ™‚ ---
**Author:** ![6harps](https://avatars.discourse-cdn.com/v4/letter/6/c5a1d2/32.png) [@6harps](https://forums.realmacsoftware.com/u/6harps)\ **Post date:** [August 10, 2026, 8:39am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/7 "2026-08-10T08:39:58Z")
Thank you for your reply, Ben! šŸ™‚ Here is a screenshot of the tree structure, I used Dropdown and Modal to create this menu (it was quite a bit of work, trying to find a way to make a bilingual site). How could I send you the project file? Via WeTransfer, or elseā€¦??? Where and how can I insert the tailwind class you mentioned? I am a dummie with everything concerning codes and classes. šŸ˜ And may I ask a second question: I canā€™t figure out how to make the mobile dropdown menu being fixed. Actually it is moving up and down on mobile, which is a bit confusing and annoying (please see screen-video 1 from my mobile). This happens only on mobile device, but not when I simulate a mobile on my computer (see screen-video 2 from my computer). Thank you very much for your help! šŸ˜ƒ ![Bildschirmfoto 2026-08-10 um 10.23.51](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/5/25d4b9093c107816e44b070dfd7a5867310daa61.jpeg) ---
**Author:** ![6harps](https://avatars.discourse-cdn.com/v4/letter/6/c5a1d2/32.png) [@6harps](https://forums.realmacsoftware.com/u/6harps)\ **Post date:** [August 11, 2026, 2:27pm UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/8 "2026-08-11T14:27:29Z")
Can anybody help me with the following two problems with the menu I have built for to be able to have a bilingual site? I am completely new to Elements (coming from Classic) and canā€™t find a solution myselfā€¦ šŸ™ 1: a blue border appears on the first button in the mobile menu-list with several buttons. The others are ok. I have inserted the tailwind class Ben mentioned above: outline-0 to this button component and all instances above this first button, but it didnā€™t solve the problem. 2: I canā€™t figure out how to make the mobile dropdown menu being fixed. Actually it is moving up and down on mobile, which is a bit confusing and annoying (please see screen-video 1 from my mobile in this forum post).This happens only on mobile device, but not when I simulate a mobile on my computer (please see screen-video 2 from my computer in this forum post). Here is the link to my project: [elementsapp://downloadDocument/34eC0a5NcKua](elementsapp://downloadDocument/34eC0a5NcKua) I am very thankful for any help! šŸ™ Thank you all in advance for your support! ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [August 12, 2026, 7:23am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/9 "2026-08-12T07:23:11Z")
Hi @6harps I recorded a quick video showing how to fix the issue: You just need to add the following CSS class to the Button components: `focus:outline-0 focus:transition-none` Let me know if you need any further help šŸ™‚ ---
**Author:** ![6harps](https://avatars.discourse-cdn.com/v4/letter/6/c5a1d2/32.png) [@6harps](https://forums.realmacsoftware.com/u/6harps)\ **Post date:** [August 12, 2026, 1:36pm UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/10 "2026-08-12T13:36:24Z")
> [@ben](#): > > `focus:outline-0 focus:transition-none` Hi Ben, thank you for the video. I did everything EXACTLY how you showed in the video, but the blue border is still there! šŸ™ I am afraid I need your further helpā€¦ Could you please have a look? Here is the link to the new modified project file. Thanks! elementsapp://downloadDocument/QMC0n2tE8MjQ ---
**Author:** ![6harps](https://avatars.discourse-cdn.com/v4/letter/6/c5a1d2/32.png) [@6harps](https://forums.realmacsoftware.com/u/6harps)\ **Post date:** [August 19, 2026, 7:52am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/11 "2026-08-19T07:52:59Z")
@ben Hi Ben, the website is now finished. You can have a look at it at the test-URL: [https://test2.riccardodelfino.eu](https://test2.riccardodelfino.eu) Unfortunately, the only downside is that this blue border (outline for accessibility) is still there, even though I followed the instructions in your video to the letter and inserted the CSS class to the Buttons components. Could you please have another look at the project to see what might be causing this? Iā€™ll upload the latest version to the cloud again; hereā€™s the link: elementsapp://downloadDocument/e7LLZ7jTXdyb [https://dl.elementsapp.cloud/g/e7LLZ7jTXdyb](https://dl.elementsapp.cloud/g/e7LLZ7jTXdyb) Thank you very much for your help! Best regards, Riccardo ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [August 19, 2026, 8:49am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/12 "2026-08-19T08:49:50Z")
Hi @6harps The issue is that the first item in the Modal is now a Text component, rather than a Button. The easiest fix is probably to change the Text component to a Button, unless thereā€™s a specific reason why you needed/wanted it to be Text? ---
**Author:** ![6harps](https://avatars.discourse-cdn.com/v4/letter/6/c5a1d2/32.png) [@6harps](https://forums.realmacsoftware.com/u/6harps)\ **Post date:** [August 19, 2026, 8:56am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/13 "2026-08-19T08:56:48Z")
Hi Ben, this is not the reason, I have tried this before, even with a button as first item (and with ONLY buttons in the modal menu) the blue border is always there. ā“ ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [August 19, 2026, 9:03am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/14 "2026-08-19T09:03:05Z")
hmm, thatā€™s not the case for me. If I remove your Text component, the first Button does not have the blue border when opening the modal. Which browser are you using? ---
**Author:** ![6harps](https://avatars.discourse-cdn.com/v4/letter/6/c5a1d2/32.png) [@6harps](https://forums.realmacsoftware.com/u/6harps)\ **Post date:** [August 19, 2026, 9:10am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/15 "2026-08-19T09:10:51Z")
I am using Safari, but have tested the website as well in Chrome, Firefox and Opera. Everywhere the same. I have removed the Text component as well, - no difference in none of the browser. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [August 19, 2026, 10:19am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/16 "2026-08-19T10:19:43Z")
I switched the top ā€œMahallā€ text for a button, and the highlight no longer appearsā€¦ Can you try doing that? ---
**Author:** ![6harps](https://avatars.discourse-cdn.com/v4/letter/6/c5a1d2/32.png) [@6harps](https://forums.realmacsoftware.com/u/6harps)\ **Post date:** [August 19, 2026, 10:54am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/17 "2026-08-19T10:54:00Z")
Hereā€™s the result ā€“ not a successā€¦ ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [August 19, 2026, 11:36am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/18 "2026-08-19T11:36:21Z")
Can you check that keyboard navigation is off on your system (off is the default)ā€¦ ![CleanShot 2026-08-19 at 12 .35.25@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/b/0b86f6563f903fbfeb5a982e8ccd5b0decf897de.jpeg) ---
**Author:** ![6harps](https://avatars.discourse-cdn.com/v4/letter/6/c5a1d2/32.png) [@6harps](https://forums.realmacsoftware.com/u/6harps)\ **Post date:** [August 19, 2026, 1:40pm UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/19 "2026-08-19T13:40:32Z")
Yes, itā€™s turned off. ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [August 20, 2026, 6:49am UTC](https://forums.realmacsoftware.com/t/button-border-colour/47094/20 "2026-08-20T06:49:15Z")
Hi @6harps Iā€™ve fixed the issue in the following project, could you please test it and let me know if it works for you? šŸ™‚ [elementsapp://downloadDocument/rTqlOTxd2snL](elementsapp://downloadDocument/rTqlOTxd2snL) [Next page](https://forums.realmacsoftware.com/t/button-border-colour/47094.md?page=2)