Creating double borders in CSS with the second border extending all the way to the top of the element

Can you help me figure out how to achieve this effect using CSS?

It seems like a simple task:

border-top: 1px solid #E2E2E2;
border-left: 1px solid #E2E2E2;
border-bottom: 1px solid #848484;
border-right: 1px solid #848484;

Just add:

box-shadow: 0.7px 0.7px 0 0.7px hsl(0, 0%, 0%);

However, the result is not quite what I expected:

The shadow adds an extra pixel on the bottom and right sides, creating a 2px border instead of a 1px border. Adding an outline won't work either since it surrounds the entire element. Is there a way to crop the box-shadow by 1px on the right and bottom sides?

htmlcssbutton

Answer №1

Check out this JSBin Demo: http://jsbin.com/reqev/2/edit?html,css,output

Contrary to your heading, I decided to utilize a box-shadow to achieve the desired effect. Since you had already experimented with box-shadow, I assumed that you were open to the idea but simply encountered difficulties in implementation. I apologize if my assumption was incorrect.

Here is the CSS code:

body {
  background: white;
}
button {
  border-right:  1px solid black;
  border-bottom: 1px solid black;
  border-top:    none;
  border-left:   none;
  background:    #ddd;
  box-shadow:    inset 1px 1px #e2e2e2,
                 inset -1px -1px #848484;
  padding:       5px 20px;
}

Answer №2

If you're looking to achieve this effect with just two elements, here's how:

<div id="x"><div id="z">Button</div></div>

For the CSS styling:

#x {
    border-top: 1px solid #E2E2E2;
    border-left: 1px solid #E2E2E2;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    background-color: #ddd;
    display: inline-block;
    cursor: pointer;
}
#z {
    padding: 5px 10px;
    border-bottom: 1px solid #838383;
    border-right: 1px solid #838383;
}

Check out the working example on this fiddle link.

Answer №3

One way to achieve this effect is by utilizing box-shadow with an inset setting.

By making E2E2E2 the top and left border, 00000 the right and bottom border, and 848484 an inset box shadow at a 225 degree angle, you can create the desired look.

Take a look at this code snippet as an example:

https://github.com/necolas/css3-facebook-buttons-example

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

When a parent element uses the flex property and its child elements have no content, the flex child will expand

I am experiencing a peculiar issue that has left me puzzled. p { padding: 0; margin: 0; } .fc { display: flex; flex-direction: column; } .fc > article { flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid #000; ...

htmlcssflexbox

Troubleshooting a hover problem in CSS navigation bar

Having some trouble with the CSS menu on my website click here. I've tried adjusting the code, but can't seem to get all the menu levels to line up properly. As a beginner in CSS, I'm sure I'm overlooking something simple. When hovering ...

htmlcssmenuhover

Troubleshooting Material-UI Menus

I need the menu to adjust its height dynamically as the content of the page increases vertically. Even though I have applied "height:100%" in the styles, it doesn't seem to work. Can anyone assist with this issue? Here is the code snippet: import R ...

javascriptcssreactjsmaterial-uimenu-items

Utilize AJAX to fetch and display the response from a Node JS route directly onto an HTML page

At the moment, I am retrieving client-side HTML/JS inputs (var1 and var2) which are then sent to server-side Node JS. The input values are stored in variables through an AJAX post call made to a specific route. What I want now is to define the values of v ...

javascripthtmljquerynode.jsajax

Ensuring input boxes are neatly positioned underneath one another, regardless of the chosen font size

Is there a way in CSS to ensure that these input boxes are always aligned below each other, regardless of font family, size, or window movement by the user? https://i.stack.imgur.com/Zbadh.png Currently, I am using the following approach: tab1 { paddi ...

htmlcss

Arranging navigation links around a centrally positioned navigation brand using Bootstrap

Struggling to create a Navbar using bootstrap right now. The issue I'm facing is with centering the nav-links on both sides of the nav-brand. Here's my HTML code: <nav class="navbar navbar-expand-sm navbar-light "> <button class="na ...

htmlcssbootstrap-4

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

While working on an angular project, I implemented a light and dark theme using mat-slide-toggle to switch between themes. The theme is stored as a boolean called isDark in a Behavioral Subject service. There are two lazy-loaded modules - one for the home ...

htmlangulartypescriptsass

Having trouble populating and submitting a selected option from a dropdown menu in Angular?

Upon loading the page, the Category dropdown automatically populates with data from the database. However, when I attempt to select a value from the dropdown and click a button to post the data to a specified URL, an error occurs: ERROR Error: Error tryin ...

javascripthtmlangulartwitter-bootstrap

Stop unauthorized pages from hijacking login cookies

I have a website called where users can create their own HTML pages accessible through the link if the username is "USR" and project is "PROJECT". However, there is a security concern... Currently, I store users' login tokens as cookies. But what ...

javascripthtmlcookies

Unable to extract text input from form

When designing a form for users to change their password, I encountered an issue where passing 3 empty Strings instead of a User object resulted in the Strings being returned as empty when submitting the form. Is there a way to retrieve String values from ...

javahtmlspringspring-mvcthymeleaf

jQuery SlideDown Navigation

Is there a way to implement jQuery code that will display dropdown menu options when the Trials link is clicked? Update: jQuery(document).ready(function () { $("a[href='http://sheep.local/cms/trials']").click(function(e){ e.prevent ...

jqueryhtmlcss

What obstacles may hinder the loading of CSS with PHP variables?

Visit this website for agriculture updates: I have utilized PHP to generate specific color schemes and styles. It seems to function correctly on all tested desktop laptops, however, it fails to load the CSS files (only loads HTML) on a Galaxy Note runnin ...

phpandroidcss

Display "Temporary Text" in an HTML drop-down list if no selection is made

Is there a way to ensure that the placeholder in an existing select element always remains visible? I noticed that when I select an option and then go back to the blank item, the placeholder disappears. How can I make sure it is always displayed when no ...

htmljquery

AngularJS: Solving the issue of controllers not exchanging data by utilizing a service

I am working with the following controllers and service: angular.module('myApp', []); angular.module('myApp').factory('ShareService', function() { var information = {}; information.data = ""; information.setD ...

javascripthtmlangularjs

How to Keep Button Highlighted After Clicking

I've experimented with various methods like using :active, :focus, adding a class, and modifying CSS rules through jQuery to maintain the button highlight, but none of them have been successful. Please take a look at my code and point out any mistakes ...

jquerycsshtml

Customizing a unique dropdown navigation experience

I have very limited experience with using jQuery and CSS. I recently came across the DropIt jQuery plugin files (accessible at ) and decided to integrate it into my Ruby on Rails project. Unfortunately, I am struggling with implementing the "Hover Me" exa ...

jquerycss

Error Encountered: Bootstrap Dropdown Menu Malfunction in Master Page

I'm struggling to make my Bootstrap drop down menu function properly. Nothing happens when I click on the link, no dropdown appears. I've set up my nav bar in a master page and have spent hours trying to troubleshoot it without success... This i ...

asp.netcsstwitter-bootstrap-3

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

Make the <textarea> occupy the entire available space

How can I make a <textarea> occupy all available space within a <td> element? Upon clicking inside the table cell, the <textarea> should display with precisely the same dimensions as the cell itself, resembling an Excel spreadsheet. I h ...

htmlcss

Tips for updating the styleurls link dynamically by clicking a button and maintaining the changes

In the midst of developing an angular 2 project, I am currently working on integrating theme settings. Within my project, I have crafted three distinct component.scss files: red.component.scss, yellow.component.scss, and blue.component.scss. My goal is t ...

cssangularangular2-templatescss-lint