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

I am looking to extract and gather information from a webpage

Here is the HTML code found in the DOM: <center> "1 file " <br> "has been successfully uploaded." </center> I need to extract the text "has been successfully uploaded." using my method. I attempted using ge ...

htmlselenium-webdrivergettext

Link that updates periodically linked to an image

My goal is to have a URL change on a timer that is linked to an image. For example, after 10 seconds, I want the URL attached to the image to change without changing the actual image itself. I've been trying to figure out how to modify this code, but ...

javascripthtmlcss

Setting a const value (true or false) based on the size of the window - a step-by-step guide

While studying, I encountered a challenge: In the code below, I need to dynamically set useState(false) based on the screen size. If the screen is larger than 947px, for instance, it should automatically be changed to true. The issue arises because sett ...

htmlcssreactjsnext.js

Spooky results displayed on website from NightmareJS

Is there a way to display the output from nightmareJS onto a webpage when a button is clicked using HTML, CSS, and JS? This is my nightmareJS code: var Nightmare = require('nightmare'); var nightmare = Nightmare({ show: false}) nightmare .go ...

javascripthtmlcssnightmare

What is the best way to incorporate CSS into this HTML document?

Content has been omitted. It is crucial to review documentation in advance in order to reduce repetitive inquiries. Check out the Webpack v2 documentation. ...

csswebpackcss-loader

Accessing the parent element within a hover declaration without explicitly naming it

I am facing a challenge with three nested divs, where I want to change the color of the children when the parent is hovered. However, I prefer not to assign a specific class name to the parent element. The issue arises because the children have their own ...

cssreactjs

Ways to adjust a specific div within an ng repeat using the value from JSON in AngularJS

When I select a different option from the dropdown menu, such as cities or states, the values are populated from a JSON file. My specific requirement is to hide a button only when the value 'No data' is populated upon changing the dropdown select ...

javascripthtmlangularjs

Ways to incorporate radio buttons, checkboxes, and select fields into a multi-step form using JavaScript

In the snippet below, I have created a multi-step form where users can provide details. The issue is that currently only text input fields are being accepted. The array of questions specifies the type of input required for each question: Question no.1 req ...

javascripthtmljquerycss

Creating a captivating animation for a social media like button with CSS

I came across some animation code on the web and noticed that when I click the image, it replays the animation from the starting point. I want to make it so that when I click the image, the animation plays and stops, and if clicked again, resets the image. ...

javascriptjquerycsshtml

Is there a way to make sure all source code is aligned to the left?

I'm interested in enhancing the appearance of the source code on my WordPress website. Currently, it looks cluttered with unnecessary empty lines and alignment issues. Is there a way to optimize the source code so that everything is left-aligned and ...

phphtmlwordpresscompressionminify

Steps for designing an HTML table that expands and collapses partially

I am currently revamping an old "Top Screens" page by expanding the display from the top 30 to the top 100 in a basic html table format. However, I only want to show the top 20 on page load with an expand/collapse feature. While I have come across examples ...

javascriptjqueryhtmlcsshtml-table

In jQuery, how to create a single event that applies to two different elements simultaneously, rather than individually for each element

How can I create a toggle event for 2 different TDs within my table row that will show/hide the next table row when clicked? <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> & ...

jqueryhtml

Tips for concealing an entire row of a table with Jquery

I am currently working on a system that involves a table with anchor tags named original and copy in each row. By clicking on these anchor tags, we are able to update the database whether the item is an original or a copy using ajax. However, I am facing a ...

javascripthtmljqueryajaxlaravel-8

Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net

I am currently in the process of developing a web-based application using Bootstrap. My goal is to save a .aspx page as an HTML file within my application. Upon writing the code: using System; using System.Collections.Generic; using System.Linq; using S ...

javascriptjqueryhtmlcsstwitter-bootstrap

The challenge of applying flex property in React Native JSX

I'm facing a challenge while trying to implement form field validation in various forms within a React Native mobile application. The problem arises when the error message, which should appear below the text input field, ends up occupying half of the ...

cssreact-nativemobile

Encountering an 'undefined' error while attempting to showcase predefined JSON data on an HTML webpage

As I try to display the predefined JSON data from https://www.reddit.com/r/science.json on an HTML page, I keep encountering the message "undefined." Below is a snippet of my HTML code: $.getJSON('https://www.reddit.com/r/science.json', funct ...

javascripthtmljson

What could possibly be causing the 500 server error in PHP?

It's frustrating - every time a user tries to enter their email and password, an error 500 message pops up on the server! But strangely enough, upon refreshing the page, everything seems to work just fine... So why does the server throw an error on th ...

phphtmlhttp-redirect

Is it possible to determine if a web page is designed for a personal computer or a

Is there a way to identify whether a given URL is intended for PC or mobile devices? I have a collection of URLs, and I need to determine if each one corresponds to a PC or mobile version. Is there any specific HTML element or marker within the page sour ...

htmlweb-crawlerrd

What is the best way to emphasize the current page within my Bootstrap <nav> menu?

Below is the Bootstrap code that defines our main menu navigation: <div class="col-xl-9 col-lg-9"> <div class="main-menu d-none d-lg-block"> <nav> ...

javascripthtmljquerycsstwitter-bootstrap

PHP appears to be failing to gather input values from form submissions using both the POST and GET methods

I have been working on setting up a login and logout system, but I am encountering an issue with sending a hidden value for logging out. Despite trying different approaches to solve this problem, I either receive error messages (while the code actually wor ...

phphtml