Arrange multiple div elements so that their borders overlap

Is there a simple way to create overlapping borders on div elements?

Imagine you have the following:

.box {
  border: 1px solid #ccc;
  width: 50px;
  height: 50px;
}
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

You can see a "double border" where the divs join together. I am looking for a way to display only a single 1px border between the divs.

I am aware that creating different classes is an option, but I am exploring if there is a simpler solution available.

How my question is unique: In my scenario, the divs are not wrapped within a container. Therefore, based on the existing answer, the border-collapse:collapse property needs to be applied to the parent or wrapper element.

Answer №1

There are a few ways to achieve this effect using CSS. For example:

.container + .container {
    margin-top: -5px;
}

Alternatively,

.container + .container {
    border-top-width: 0;
}

Answer №2

Give this code a shot!

<div class="wrapper">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>


.box {
  border: 1px solid #ccc;
  width: 50px;
  height: 50px;
  margin-bottom: -1px;
}

.box:last-child {
  margin-bottom: 0;
}

See it in action here - https://jsfiddle.net/8cc8hoxf/

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

Compiling and rendering HTML code from a file with AngularJS

Here is the custom directive code that I have created: angular.module('app.directives', []).directive('userHeader', ['authService', '$compile', function(authService, $compile) { return { restrict: 'AEC&ap ...

How can I use jQuery to set a JSON array as the value of a specific index in a jQuery array?

Imagine that I am fetching JSON data from two different PHP files, first.php and second.php, using jQuery. I want to store this data in an array named var total = [index1,index2]. The JSON data from the first.php should be assigned to the first index of th ...

Using div elements with a data attribute labeled as title in order to implement an accordion feature

Here is the structure I am working with to display titles before the corresponding div with data-attribute. I am aiming to achieve this layout: 1st Title 2nd Title 3rd Title 4th Title When "1st Title" is clicked, the layout should transform into: 1s ...

Retrieve data from a server using an Ajax GET request to access information stored within an HTML

Seeking guidance on implementing a jQuery GET request for retrieving specific information from a page structured similar to the following: <tr class='tr'> <td class='example1'> <span> Information I possess ...

Refreshing pre-established CSS styles

I am currently working on developing an alternative design for a website as a backup plan. Unfortunately, I am restricted in terms of changing the architecture of the system. The main stylesheet is loaded first, followed by a second one which I have contro ...

Bootstrap triggering unexpected behavior in navbar styles

As I delve into the world of HTML, CSS, and JS, I encountered a peculiar error while using Bootstrap that seems to be affecting the links in my navigation bar. Here's the CSS I've been using: https://pastebin.com/naVZuzaG And here's the co ...

Ways to include additional details in each row of an autocomplete feature

I have successfully implemented autocomplete for venues worldwide, but now I want to display the address of each venue below its name. For example, if the autocomplete suggests the venue name as ABCD, I want the address of that venue to appear right benea ...

There is an unseen culprit lurking in the white void on the right side of the website

Does anyone else notice a mysterious blank space on the right side of my website? Even though the content spans 100% across the site and looks fine, there seems to be an extra margin when you scroll to the right, whether you're on a desktop or mobile ...

How to implement a link_to tag in autocomplete feature with Rails

I'm having trouble adding a link to the show page in autocomplete results. Although my jQuery alert box is working fine, I can't seem to apply CSS to a div using jQuery. Here's the code snippet I've posted below: //application.js ...

Using jQuery to eliminate repetitive line dividers in a document

Is there a way to remove duplicate dividers in my bootstrap pull-down menu (MVC5 website) that appear stacked up due to user permissions? Here is an example of the issue: <li class="divider"></li> <li>@Html.RouteLink("option1", "Route1") ...

The image does not automatically adjust size when the window is resized

I'm having an issue with my HTML and CSS code that is supposed to display two images side by side and resize when the browser window shrinks, but it's not working as expected. Even after removing all classes on the parent divs, the images still ...

Angular JS: Automatically toggle the visibility of a div on a panel click event

There is a row, panel, and a closed div on load. Clicking on the panel should make the div appear while making the row and panel disappear. Clicking on X should make the panel and row appear again. <script src="https://ajax.googleapis.com/ajax/libs/ ...

Transforming jquery code into angularjsAre you looking to migrate your

I am currently struggling with converting a jQuery function into an AngularJS function. Here is the specific code snippet: $('p').each(function() { $(this).html($(this).text().split(/([\.\?!])(?= )/).map( function(v){return '< ...

Split the input string into individual characters for each entry

As a beginner in Angular, I am currently exploring ways to split a single input field into separate inputs for each word. I attempted to achieve this using jQuery but struggled and also learned that mixing jQuery with Angular is discouraged. Here's th ...

Ways to conceal numerous objects

I need to create a function where I can hide multiple elements by pressing a button based on the value of checkboxes. If a checkbox is checked, the corresponding element should be hidden. Currently, I have some code that only works for the first element: ...

How can I anchor a div Banner saying "Get 50% off our products" to the Navbar directly above it?

Bootstrap Question: How can I attach the div Banner ("50% off of our products") to the Navbar directly above it? The structure looks like this: <Navbar> </Navbar> <div> <span>Discount: 50% off of our products </span </di ...

What steps should I follow to enable a tooltip in this specific situation using qtip?

In my database, I have tables for venues, venue types, and map icons with the following relationships: A venue belongs to a venue type A venue type belongs to a map icon Each venue result is shown on the index page as a partial. Each partial ...

What steps should be taken to resolve error code 405 in Flask/Py?

I've been encountering an issue with my Flask and socket.io chat application - every time I try to send a message, I receive a 405 error. Despite multiple attempts, I can't seem to resolve this problem (it's just a basic setup with a usernam ...

js simulate a click on an anchor element based on the child element's id

I am trying to automatically trigger a click on an a tag that contains a div with the id='a'. $(document).ready(function() { $("#chat_list_content a:has(div[id='a'])").click(); //$("#chat_list_content a:has(div[id='a']) ...

Is it possible to conceal the text specifically inside a textarea, rather than just hiding the entire textarea itself?

Is it possible to have a button next to the textarea that allows you to hide and unhide the text inside the textarea by clicking on it? ...