Creating inner borders for the bottom and left sides of an element, while excluding any borders for the top and right sides

How can I create a DIV with borders on the bottom and left sides only, like the following design:

 +++++++++
 +|      +
 +|      +
 +|      +
 +|______+
 +++++++++

+ : DIV's boundary
| : border

I've explored some options that didn't meet my requirements:

  • box-sizing, as it affects all four sides of the DIV.
  • box-shadow, because it produces an outside shadow.
  • border-left \ border-bottom, which would not be inside the DIV.

Would setting borders for the left and bottom sides along with an appropriate margin using BORDER_WIDTH be the most effective solution, or is there a better approach?

Thank you.

p.s. Looking for a pure CSS solution.

htmlcss

Answer №1

box-shadow includes an "inset" property that allows you to apply this style

div {
  width: 100px;
  height: 100px;
  border: 1px #ccc solid;
  box-shadow: 10px -10px 0 0 #000 inset; /* make sure to use vendor prefixes if needed */
}

You can easily adjust the offset and color of the shadow as per your requirement.
See an example on codepen : http://codepen.io/anon/pen/LoFvj

Screenshot

Answer №2

If you're looking for a creative approach, consider using box-shadow to define the outer border

Check out this innovative demonstration on Codepen

div {
  width: 200px;
  height: 200px;
  border: 4px red solid;
  border-top:none;
  border-right:none;
  box-shadow: 0px 0 0 1px grey;
}

Answer №3

One creative way to create the appearance of an inner border is by utilizing pseudo selectors.

Check out this Fiddle example for a visual demonstration

.inner-border {
   border-left: 5px solid #000;
   border-bottom: 5px solid #000;
   border-right: 5px solid red;
   border-top: 5px solid red;
   position: relative;    
}

.inner-border:before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 5px solid red;
}

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

Sorting nested table rows in vueJS is an essential feature to enhance

I am working with a json object list (carriers) that looks like this: https://i.stack.imgur.com/0FAKw.png Within my *.vue file, I am rendering this using the following code: <tr v-for="carrier in this.carriers"> <td>{{ carrier.id ...

javascripthtmlvue.js

Creating responsive designs for high resolution screens using media queries in HTML

I'm curious about how to implement media queries for high-resolution screens such as 4k, 5k, and retina displays. I've been researching this topic and have found that resolution-specific media queries can be used. However, I am unsure of how to d ...

cssmedia-queriesretina-display

Unusual layout issues arise when combining images and text

Check out this jsFiddle My goal is to display images and text side by side in a horizontal layout. The text sections are using the jQuery Cycle Lite Plugin to cycle through a list of words. However, when you view the provided jsFiddle link, you'll no ...

jqueryhtml

I'm curious about how I can determine the reason why my badge is not accepting HTML tags in its tooltip

My goal is to integrate a bootstrap badge-alert with an HTML tooltip. I am following the example provided at https://getbootstrap.com/docs/4.3/components/tooltips/ Despite my efforts, when using the code snippet below, the tooltip appears but the HTML tag ...

htmlbootstrap-4

Determine if a div contains an svg element with JavaScript

My question involves a div containing a question mark and some SVG elements. Here is the initial setup: <div id="mydiv">?</div> When validating a form submission in my code, I check if the div text contains a question mark like this: const f ...

javascriptjqueryhtmlcsssvg

Tips for presenting PHP code in a Bootstrap 3 col-sm-4 layout for each set of 3 database entries in a single row

My PHP program retrieves 3 customer records from the database. I want to display the results in a Bootstrap grid view with 3 columns of col-sm-4 in one row. Currently, it displays all the results in a single vertical line. Another requirement is to show ...

phphtml

Unnesting Django Endless Pagination in a Twitter-style format, how can I move a div outside of another div?

After implementing Django Endless Pagination with the Twitter Style and Show More option, everything seems to be working smoothly without any issues. I've even included media queries in the HTML render to help visualize the problem more clearly when r ...

jqueryhtmlcssajaxdjango-endless-pagination

Ensure the heading expands to fit the container and include > at the conclusion

Could anyone help me create a heading effect link similar to the one on BBC's website at ? I'm specifically looking to achieve an effect where the heading text is on the left and an arrow is displayed on the right. Additionally, I would like both ...

htmlcss

Tips for importing a canvas using a fabric.Group from a JSON file?

I'm currently facing an issue with saving my canvas as a JSON file in fabricjs. Everything works fine with ToJSON and loadFromJSON functions except when there is a group on the canvas. Is there anyone who can provide guidance on how to tackle this pro ...

javascriptjsonhtmlhtml5-canvasfabricjs

Struggling with showcasing database information in HTML using Node.js and Sequelize

In the server.js file, I have the following code: TABLE .findAll({ raw: true }) .then(function(asd) { console.log(asd); }); This code displays all data from my database in the console. Now, my question is: how can I display this data on my website? ...

htmlnode.jssequelize.js

Conceal the choice if its value matches that of another option

My goal is to create a code that will hide an <option> if its value matches the value of the first option (which is retrieved dynamically with PHP). Here's the initial code snippet: <select onChange="this.form.submit()" name="cart[<?php e ...

javascriptjqueryhtmllistboxhtml-select

What is the best way to unselect the "all" selector if one of the inputs is no longer selected?

I am facing an issue with a search filter functionality. When all filters are selected and then deselected individually or together, the "all" button remains selected. I need help in ensuring that when any filter is deselected, the "all" button also gets d ...

javascriptjquerycsshtml

Tips for updating the current user's username value in local storage in Angular

https://i.stack.imgur.com/ZA32X.png https://i.stack.imgur.com/iDHZW.png I am facing an issue with updating the local storage of a current User for only username. When I update the username, it's not reflecting in local storage. Even though I can s ...

htmlcssangular6typescript2.0

Internet Explorer not recognizing attribute selector in jQuery

My JavaScript code utilizes the css selector [style="display:none"], and it functions correctly in Chrome, Firefox, Opera, and Safari on Windows. However, in Internet Explorer 11, it behaves unexpectedly. To test this issue, simply click on the buttons (e ...

jquerycssinternet-explorerjquery-selectors

Remove specific data from jQuery datatables using data attribute

My jQuery datatable is loaded with data from a database without any filtering by default, providing all the necessary information for users. In addition to the built-in search functionality of jQuery datatables, I have incorporated custom search input fiel ...

javascriptjqueryhtmldatatables

Tips for turning cards in HTML

I am a beginner in web development and encountering a specific issue. To address this, I have created a Codepen My challenge involves implementing images for the 6 cards displayed. Upon hovering over an image, it should transition to show the content of t ...

htmlcsswebbootstrap-5visual-web-developer

Struggling with aligning form-group elements along with razor html helper buttons in Bootstrap's form-horizontal layout

I'm struggling with properly aligning buttons in my razor markup. When using form-horizontal: <div class="row"> <div class="col-md-6"> <div class="form-group"> @html.labelfor @html.editorfor @html.validation ...

htmlcsstwitter-bootstraprazor

Utilizing CSS for fixed positioning and media queries

I'm currently facing an issue with media queries and a sidebar div that has a fixed position. The problem arises when the viewport becomes too narrow, causing the main content to shift to the left and end up below the sidebar. I attempted to resolve t ...

cssstaticpositionmedia-queriesfixed

Creating a shape image border with a clickable container can be achieved by using a combination of HTML and CSS

I'm trying to achieve the border effect shown in the picture while keeping the area under the frame clickable. I've tried using a div on top of another div, which works, but the bottom div is not clickable. I also attempted using a border image, ...

htmlbordercss

The dilemma between Nuxt Js global CSS and Local CSS

Currently, I am in the process of developing a Nuxt application utilizing an admin template. While I am well-versed in Vue.js, I am finding the aspect of loading assets within Nuxt.js to be a bit perplexing. I am in the process of converting the admin temp ...

javascriptcssvuejs2nuxt.js