Avoiding duplicate borders in grid layout

I'm working on a crossword puzzle design using css grid

The blank cells have no color, while the other cells have a black border.

The issue I'm facing is that the borders are overlapping.

I've referred to similar questions on Stack Overflow like this one and this one, but the problem here is not all cells have this double border.

Here's the code snippet:

.crossword-board-container {
      position: relative;
      background: #fff;
    }

    .crossword-board {
      background: transparent;
      display: grid;
      grid-template: repeat(5, 4em) / repeat(5, 4em);
      list-style-type: none;
      padding: 0;
      margin: 0 auto;
    }

    .crossword-board__item {
      border: 1px solid #000;
      background: transparent;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      text-transform: uppercase;
    }
<div class="crossword-board-container">

      <div class="crossword-board">
        <!-- ROW 1 -->
        <span></span>
        <span></span>
        <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />
        <span></span>
        <span></span>

        <span></span>
        <span></span>
        <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" /> <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />
        <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />


        <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />
        <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />
        <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />
        <span></span>
        <span></span>

        <span></span>
        <span></span>
        <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />
        <span></span>
        <span></span>

        <span></span>
        <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />
        <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

        <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />
        <span></span>

      </div>
    </div>
htmlcss

Answer №1

To create a collapsed border effect, adjust the input elements by moving them 1px to the top and left.

Next, add a padding of 1px to the container.

Here is the updated CSS code:

.crossword-board-container {
  position: relative;
  background: #fff;
}

.crossword-board {
  background: transparent;
  display: grid;
  grid-template: repeat(5, 4em) / repeat(5, 4em);
  list-style-type: none;
  padding: 1px;
  margin: 0 auto;
}

.crossword-board input {
  margin: -1px 0 0 -1px;
  border: 1px solid red;
  background: transparent;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

And here is the revised HTML structure:

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

Obtaining the Div ID After Clicking on a Link

I'm attempting to fade out a box once the X in that box is clicked. I haven't been able to make it work even after searching on Google. I managed to get it working when clicking the div itself using $(this), but my goal is for it to work when the ...

javascriptjqueryhtmlclickfadeout

The Ajax request was a success, but I am unable to retrieve radio button values from the $_POST variable

My website operates fully asynchronously, generating and destroying HTML elements on button clicks that prevent navigation. In this section, I am creating a form with an array of radio boxes for rating from 1 to 10. This form is submitted using jQuery.aja ...

javascriptphpjqueryhtmlajax

Facing a blank page with no errors displayed during the HTML rendering process in Angular version 6

One of the most frustrating aspects of working with Angular is the lack of information provided when there is a render error in an HTML page. Instead of specifying which page the error is in, Angular defaults to the route page and provides no further detai ...

htmlangular

What is the most efficient method for applying multiple classNames to elements in Next.js?

Could you provide me with a list of all methods, both with and without packages? Also, I'm interested in knowing why one method is considered better than the others. ...

cssreactjsnext.js

"Unfortunately, SimplyScroll isn't functioning properly on this particular page

What is the reason for simplyscroll not being able to handle this div with nested divs? EXTRA INFORMATION The scrolling functionality does not work. Clicking on the buttons doesn't trigger any scrolling. Changing the contents of the div to plain tex ...

javascriptjqueryhtmlsimplyscroll

Is Material-ui's sx feature able to produce optimized utility classes like tailwindcss?

When utilizing Tailwind CSS, it is compiled in the following manner: <div class="font-bold"></div> <div class=".font-bold"></div> This compiles to: .font-bold{ font-weight: bold; } So... when using SX like thi ...

htmlcssmaterial-uivitemui-x

Is there a way to incorporate my personalized styling and HTML code into Django forms?

I've been struggling to customize form styling in Django. I want to exclusively use my own styles for the forms. How can I achieve this? <form id="contact" action="" method="post"> <div class="row"> ...

htmldjango

Issue with utilizing display: table and overflow: hidden in Internet Explorer and Firefox, functioning properly on Webkit and Blink

JSFiddle : http://jsfiddle.net/h7xvr2t9/2/ I have been experimenting with ways to achieve some effects: Animating a hidden DIV to slide into view from below a visible container Centering text/image on a link to trigger the animation HTML <div clas ...

javascripthtmlcss

How can I add text to a bar or table using CSS/HTML?

I am trying to create a design similar to this: http://img291.imageshack.us/img291/5571/bartablestyling.png Currently, I only have the top bar in place. When I attempt to add text, it ends up below the profile picture. I want to avoid using float:left ...

htmlcss

Which option offers superior performance: using attributes through HTML or jQuery?

At times, I find myself needing to include special classes, divs, and attributes in my HTML code for jQuery scripts to function properly (the site's "no-JavaScript" version doesn't require these elements). You probably understand what I mean. I& ...

javascriptjqueryhtmlperformance

What is the best way to adjust the size of a column when hovering

What I am attempting to achieve is, I would like the column box to have a 100% width, and when it is hovered over, I want it to transition to the left, with the width of the column box being about 60%, revealing a second block that shows up as 20% width o ...

jqueryhtmlcsshover

Svelte remains static and is not experiencing re-rendering

I am currently incorporating the history component in Svelte, where it should display when changes occur in the bids array. const bidsArray = [ { player: 0, bidType: 'pass' }, { player: 1, bidType: 'level', level: '1&apos ...

javascripthtmlsvelterenderrerender

Is there a method to display text on the screen after a countdown has finished?

I am looking for a way to display some text or an image of a cake on the screen once this countdown reaches zero. It's a countdown leading up to my birthday, and I really want it to have that special touch at the end. However, I've been strugglin ...

htmlcountdown

Using a combination of AND and OR in XPATH

Recently, I encountered the following HTML code: <div><h6>abc/h6><p>date</p></div> Using Selenium, I managed to locate this element based on text. However, the issue arises when <h6> can contain various words like "d ...

htmlseleniumselenium-webdriverxpathselenium-chromedriver

Establish a primary background color for the React application, with the majority of the display content

I have been working on styling a React project where App.js mainly handles routing and navigation to its components: App.js import {useState, useEffect} from 'react'; import Models from './pages/Models'; import Loadingpage from ' ...

javascripthtmlcssreactjsfrontend

What is the best way to display an icon and text side by side in the header of a Phonegap app

____________________________________________________________ | logo_image page_Title | ------------------------------------------------------------ I am looking to create a header for my PhoneGap app similar to the one sh ...

htmlcsscordova

What is the best way to include a parameter in the current URL in Django using Paginator?

After setting up a page to display database data, I added a paginator and a search bar to my website. When a user searches for something, the URL changes to include the search query like this: .../search/?q=xyz However, when paginating the search results ...

javascripthtmljquerydjangopagination

Greetings! I am interested in injecting HTML elements into a DOM using PHP and the jQuery Ajax method

After trying the following code snippet: $.ajax({ url: 'cod.php', type: 'POST', dataType: 'html', success: function(res){ $("#tests").html(res); } I implemented a foreach loop in my PHP s ...

phpjqueryhtmlajax

Hide the form using jQuery specifically when the login submit button is selected, not just any random button

One issue I am facing is that when a form is submitted correctly, it hides the form. However, I have added a cancel button to close the pop-up thickbox window, but instead of closing the window, it also hides the form. How can I ensure that hitting cancel ...

jqueryhtmlajaxforms

Ways to configure dynamic and responsive divs using CSS exclusively (no javascript needed)!

I am looking to have my main div expand in height based on the categories div, content, or product pictures. Check out the website here Here are the issues I'm facing: The content div and categories div are both within the main div, but the produ ...

htmlcss