Creating double borders on a single element without using a wrapping div is possible using only CSS

I am attempting to create a specific effect using just one element, aiming to eliminate the need for a wrapper div.

Check out my progress so far: http://codepen.io/anon/pen/kdvex

Although I have come close to achieving the desired effect by incorporating an inset shadow and border, the curved borders are not quite right. Take a look at the edges of the blue section to see what I mean.

Here is my current solution: http://codepen.io/anon/pen/uLKjl

Is there anyone who can enhance this design? Could it be done without using additional elements?

htmlcss

Answer №1

Expanding upon Cadence96's recommendation to utilize the pseudo selector for enhancing the second border:

Explore the code snippet here

Answer №2

I implemented a new feature to create a border effect using an after pseudo element.
http://codepen.io/anon/pen/FxemK 

.btn.blue {
  z-index:2;
  position:relative
}

.btn.blue:after {content:"."; position: absolute; left:0; top:0; width:99.6%; height: 24px; background:none; z-index:1; border:2px solid white; 
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;}

ANOTHER OPTION: http://codepen.io/anon/pen/FxemK 

.btn.blue {
  z-index:2;
  position:relative; line-height:100%;
}  



    .btn.blue:after {content:"."; position: absolute; left:0; top:0; 
  width:99.6%; background:none; z-index:1; border:2.2px solid white; 
  line-height:133%; 
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;}

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

What could be the reason for the d-flex class in bootstraps preventing my div from expanding to 100% width?

I have a div where I need to display two elements next to each other: a search input field and the corresponding submit button. My attempt so far was to achieve this using the following code: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn. ...

htmlcssflexboxbootstrap-4

Using a CSS button to activate a JavaScript function: A step-by-step guide

My current project involves writing a script to change the color of text when a specific button is clicked. The idea is that clicking the "Change color1" button triggers the text color change using the following code snippet: <button onclick="myFunction ...

javascriptcss

Discovering the quantity of identical elements within a JavaScript array

Looking for some assistance in solving a JavaScript problem as I am relatively new to the language: I have an array and I need help in determining the count of identical values. Below is my array: var arr = ["red", "blue", "green", "red", "red", "gray"] ...

javascripthtml

Distance from the border

Having a small issue with margin, here is the code: echo '<p class="news_post">'; $stripped = strip_tags($post,'<img>'); $break = str_replace('>','><br>',$stripped); ...

phpcssmargin

Notifications for AngularJS tabs

I need help finding a method to incorporate "tab notification" using AngularJS, in order to show that there are important alerts that require attention. For example: (1) (3) TAB_ONE TAB_TWO TAB_THREE Could you provide any recom ...

javascripthtmlcssangularjs

What is the best method for ensuring that cheese rises to the top?

Is there a way to increase the value of the variable cheese? I suspect it has something to do with how the variable cheese is defined each time the JavaScript is activated, but I'm not sure how to go about it. Can you offer some guidance on this? & ...

javascripthtml

Adding a countdown timer plugin from jQuery into a Blogger template

Currently, I am utilizing the 'simple' template on Blogger to build my blog. My goal is to incorporate a countdown timer into the design. After conducting some research, it appears that the most efficient method (that also allows for customizatio ...

javascriptjqueryhtmltimerblogger

Move the absolute div by sliding it to the left from 120% to -10px

I want to move an absolute positioned div from the left side of the screen to -10px on button click. Here's my attempt so far, but it's not working as expected. Javascript/jQuery $('.button').click(function() { $(this).parent().f ...

javascriptjqueryhtmlcss

Combining Material UI's Higher Order Components (HOCs) for Maximum Efficiency

Currently in the process of combining multiple Material UI components for rendering. The code I have so far is: export default connect(mapStateToProps, mapDispatchToProps)(withTheme()(withStyles(styles)(ShopStore))); This setup is functioning as expected. ...

javascriptcssreactjsreduxmaterial-ui

Using a batch file to send an email

I have a goal to create an autorun file that can be placed on an external drive, flash disk, or CD. When executed, this file will run a series of commands that eventually send the computer's IP information back to me. Here is what I have so far... Th ...

phphtmlemailbatch-fileip

Using a responsive menu (mmenu) can lead to an increase in Cumulative Layout

I've implemented mmenu as a responsive menu on my website. Recently, I discovered errors in Google's search console related to high CLS (Cumulative Layout Shift). Upon further investigation, I noticed that when loading my page in "slow" mode for ...

javascripthtmljqueryperformancegoogle-search-console

Is there a way to shift this div to the bottom and incorporate some quirky pop-up squares?

I am struggling to figure out how to move this div to the bottom. Additionally, I want to create temporary pop-up squares (simple divs) in random directions that will disappear after 50ms. My attempt to float this box to the bottom did not yield the desir ...

jquerycss

Detect when a child li element is clicked and then toggle the class of its parent div

I have a div container that contains an unordered list tab menu. By clicking on each tab, the menu content changes correspondingly. The functionality is working well, but I want to alter the background image of the container div based on which li is clicke ...

javascriptjqueryhtmlcssjquery-ui-tabs

No change in the element's text content when clicking

I'm working on creating a timer that counts down from either 15 or 30 seconds. However, I'm having trouble changing the text value when the 15 button is clicked. Can someone help me figure out what's wrong? Thank you in advance HTML <h ...

javascriptjqueryhtml

CSS - extend underline text decoration to include :before elements

Currently, I am utilizing a font icon from Icomoon to include an icon in the :before element of an <a>. The functionality is smooth, but the issue arises with the text-decoration: underline, which only applies to the icon and text within the anchor t ...

htmlcss

Several instances of @page found within the CSS file

Is it possible to include multiple @page elements in a single HTML file? I am interested in this approach for printing various documents: For example, there are multiple invoices, each consisting of multiple pages. The first page of each invoice needs to ...

htmlcss

What is the reason border-box does not function properly on inline-block elements?

Demo: http://jsfiddle.net/L5jchnpm/ I've encountered an issue where I believed that using display: inline-block would make elements act as both inline and block elements. Additionally, I thought that setting box-sizing: border-box would adjust the w ...

htmlcss

Comparing iPad and Desktop Devices

Working on the responsive site sandbox.mercomcorp.com, I encountered an issue where the CSS meant for an iPad device is affecting the desktop CSS. Shouldn't the iPad have its own separate media query from the desktop? Here's a snippet of the CSS: ...

ioscssipadresponsive-design

In order for Angular forms to be considered valid, they must fall into one of two form

I am attempting to create a dynamic angular form where the user must enter either A or B. A represents a unique identifier, while B consists of a set of values that correspond to that identifier. My goal is to validate the form as valid if either A is ente ...

javascripthtmlangularangular-reactive-formsangular-validation

Adjust text alignment of SVG elements using CSS

I am facing an issue where I am unable to change the x and y variables of Svg text tags using CSS. This should work as it does with Svg and . However, I am only able to make changes if I directly add the x and y positions in the HTML code. Html: <svg ...

htmlcsssvg