There are two borders in place, with the second border present only on the right and bottom

Can someone help me achieve borders like the ones in this image? https://i.sstatic.net/qZHbK.png

I tried using the after pseudo-element as shown below, but after learning from this discussion: Why can't an element with a z-index value cover its child?, I realized it's not possible.

I also considered using box shadow and outline, but nothing seems to work well. Any ideas, please?

.wp-block-group.is-style-black-blue-border {
  position: relative;
  z-index: 1;
  border: 3px solid #000;
  border-radius: 8px;
  padding: 10px;
}

.wp-block-group.is-style-black-blue-border::after {
  content: "";
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  display: block;
  position: absolute;
  bottom: -8px;
  right: -8px;
  z-index: -1;
  border: 3px solid blue;
  border-radius: 8px;
}
<div class="wp-block-group is-style-black-blue-border">
  <div class="wp-block-group__inner-container">
    <p>some content</p>
  </div>
</div>

cssborderz-indexpseudo-element

Answer №1

You have the option to achieve a similar effect using box-shadow instead. Refer to the code below for implementation.

Additionally, the desired effect can be accomplished as shown:

.wp-block-group.is-style-black-blue-border {
  position: relative;
  background-color:white;
  border: 3px solid #000;
  border-radius: 8px;
  padding: 10px;
  width: 200px;
  height: 100px;
  
}

.wp-block-group.is-style-black-blue-border::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: -1;
  border: 3px solid blue;
  border-radius: 8px;
}
<div class="wp-block-group is-style-black-blue-border">
  <div class="wp-block-group__inner-container">
    <p>some content</p>
  </div>
</div>

.wp-block-group__inner-container {
  border: 2px solid black;
  border-radius: 1rem;
  box-shadow: 5px 5px 0px 2px #ffffff, 8px 8px 0px 4px #0000ff;
  width: 200px;
  height: 200px;
  padding: 1rem;
}
<div class="wp-block-group__inner-container">
    <p>some content</p>
</div>

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

Leveraging the power of CSS id selectors to customize the appearance of a Grid

In my current CSS file, I have defined two id selectors: #TableHead { font-family: Arial, Helvetica, sans-serif; font-size:11px; font-weight: bold; color: #000000; border-top-width: thin; border-top-style: solid; border-top-color: #A9AAAA; border-bottom-w ...

c#asp.netcss

What is the reason for using <div class="clear"></div> instead of <div class="clear"/>?

It dawned on me that: <div class="clear"/> can wreak havoc on the layout after a sequence of floating divs, whereas <div class="clear"></div> works perfectly fine. Does anyone have an explanation for this? Here is the CSS being used ...

htmlcsscss-float

How can an external style sheet be inserted into an iframe?

My website features an editor on one side and an iframe on the other. Currently, anytime HTML code is entered into the editor and a keyup event occurs, the iframe updates automatically. I am looking to add default styling to the code entered in the editor ...

javascripthtmlcssiframe

Gatsby causing issues with Material UI v5 server side rendering CSS arrangement

I shared my problem on this GitHub issue too: https://github.com/mui-org/material-ui/issues/25312 Currently, I'm working with the Gatsby example provided in Material UI v5: https://github.com/mui-org/material-ui/tree/next/examples/gatsby After imple ...

javascriptcssreactjsmaterial-ui

Display the column every time the user types something into the search bar

Currently working on an Angular project and I'm trying to figure out how to make the middle column visible whenever the user enters text in the search bar. At the moment, I have a search bar for user input and three flex columns. The middle column is ...

htmlcssangularlayoutmultiple-columns

JavaScript Application - Problem with Universal Windows Script

I recently built a website utilizing material design lite for the aesthetics: Here are the scripts included: <script src="./mdl/material.min.js"></script> <script src="Scripts/angular.min.js"></script> The necessary .css fi ...

javascriptcsswindows-10-universalmaterial-design-lite

Creating a Jquery slider animation: step-by-step guide

I tried implementing a code example in jQuery, but I am struggling with achieving smooth transitions in my slides. The changes are happening too abruptly for my taste. How can I create animations that occur during the transition, rather than after it? f ...

jquerycss

Creating a list element after clicking in ReactJS is achieved by using event handlers in

I have buttons and inputs that I want to use to generate a list item in the ul section at the end of my code. However, despite adding functions to handle this feature, it still doesn't work as intended. import { useState } from 'react'; impo ...

htmlcssreactjs

Unusual CSS rendering hiccup

Using jQuery, I am manipulating the display of an <a> element. Depending on certain keypress events, it adds or removes a class from an <input> element (which controls the display) that is related as a sibling to the mentioned <a>. The i ...

javascriptjquerycsscss-selectors

Issue with bouncing dropdown menu

I am in the process of enhancing a Wordpress website by implementing a jQuery menu with sub-menus. Below is the jQuery code snippet: $(document).ready(function(){ $('.menu > li').hover(function(){ var position = $(this).position(); ...

javascriptjqueryhtmlcsswordpress

Modify flex direction to column in response to changes in height of another div or when its content wraps

I am currently utilizing React MUI V5 and I am looking to modify the flex direction of a div from row to column when a preceding div changes in height or wraps. Below is a basic example of what I have implemented using plain HTML/CSS, but I am uncertain i ...

htmlcssreactjsflexboxmaterial-ui

Setting up global color variables for React with Material UI theming is essential for ensuring consistent and

Is there a way to customize the default material-ui theme using global CSS? Additionally, how can we incorporate HEX values for colors when setting primary and secondary colors in the theme? In my App.js root file, I have defined a custom theme and want t ...

cssreactjsmaterial-ui

What causes the CSS Position Fixed Property to fail?

Can someone help me fix my navbar so that it remains fixed when I scroll? Currently, it moves up as I scroll down. Below are the source codes I'm using: * { margin: 0; padding: 0; box-sizing: border-box; } h1 { margin: 1rem; } ul { posit ...

htmlcsspositioncss-position

When is the appropriate time to utilize the style attribute in CSS?

Hey there, I'm in the process of building a website from scratch and I've hit a snag. I understand that using the style tag isn't ideal, but would it be acceptable in this scenario? Is there a more efficient approach? Let's consider t ...

htmlcssstylescoding-style

Is it possible to encase <v-img> within an anchor element?

I am currently using Vuetify 1.5 and have included a couple of <v-avatars></v-avatars> elements in which there is a nested <v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the ima ...

javascripthtmlcssvue.jsvuetify.js

Creating a sleek full-page container with a navigation bar using TailwindCSS

I am currently utilizing Tailwind CSS and in need of creating a layout that consists of: A sticky navigation bar A full-page section with content centered Other sections with varying heights A footer Below is a simple representation: +------------------- ...

htmlcssfrontendtailwind-css

A step-by-step guide to implementing Inline Linear Gradient in Nuxt/Vue

How can I create a linear gradient overlay on top of my inline background image? I attempted to add a CSS style but the class seems to be positioned beneath the image. <div class="header__bkgd" v-bind:style="{'background-image': 'url(&ap ...

cssvue.jsbackground-imagelinear-gradientsnuxt.js

Emphasize entries in an index that match the currently visible content as you scroll

I have a table of contents in my HTML page with the CSS attribute position: fixed;. I want to emphasize the current reading position by highlighting it (bold or italics) as I scroll down the page. | yada yada yada ... 1. Secti ...

javascripthtmlcsshugo

Using jQuery to dynamically disable a textbox when a checkbox is checked

I'm trying to implement a functionality where a textbox becomes disabled and changes its background color when a user unchecks a checkbox. Conversely, if the user checks the checkbox, the textbox should become editable and change its background color ...

jqueryhtmlcss

Having trouble placing the flash element above the HTML?

Despite my efforts to use SWFObject to embed a swf file on my webpage, it seems that the flash movie is covering some of the HTML components. Strangely enough, the HTML elements are bleeding through and appearing on top of the flash content. I've tri ...

htmlcssflashz-indexwmode