Various borders within a single div

Having trouble creating a div with different borders using CSS. I want a card with solid borders on the left, top, and right sides, but a specific border image at the bottom.

I can get either the image or the solid borders, but not both simultaneously.

Whenever I add the image, it applies to all borders.

This is the code I'm using for the bottom image border:

border-width: 0px 0px 32px 0px;
-moz-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-webkit-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-o-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
border-image: url(../images/bordas/Recorte.png) 31 25 33 26 fill repeat;

Is there a way to have solid borders on three sides and the image only on the bottom?

If I increase the border-width, the image shows up instead of the solid border.

Appreciate any help!

htmlcssborderborder-image

Answer №1

You have the option to use the :after pseudo-element to create a similar visual effect.

div {
  border: 1px solid black;
  border-bottom: 0px;
}
div:after {
  content: '';
  width: calc(100% + 2px);
  margin-left: -1px;
  background: white;
  display:block;
  background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66);
  background-repeat: repeat;
  height: 10px;
}
<div>test</div>

Answer №2

To create a stylish border effect, start by setting the bottom image as the border and then move on to the other sides.

border-image:url("http://example.com/image1.png");

/* now define borders for the top, left, and right sides */
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;

Afterwards, continue by specifying the borders for the top, right, and left sides.

Answer №3

I managed to achieve this effect by nesting one div inside another.

.outer-div {
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: #e6e9ee;
border-radius: 10px;
}

.inner-div {
border-style: solid;
border-width: 0px 0px 32px 0px;
-moz-border-image: url(../images/borders/Cutout.png) 31 25 33 26 repeat;
-webkit-border-image: url(../images/borders/Cutout.png) 31 25 33 26 repeat;
-o-border-image: url(../images/borders/Cutout.png) 31 25 33 26 repeat;
border-image: url(../images/borders/Cutout.png) 31 25 33 26 fill repeat;
margin-bottom: -16px;
}

Here's an example of the HTML code structure:

<div class="outer-div">
    <div class="inner-div>
    </div>
</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

Elements stacking up in succession

I am having issues with the alignment of my div elements, as they are either stacking behind or on top of each other. td { width: 14.28%; height: 16.6%; position: relative; } .details { position: absolute; display: none; ba ...

htmlcss

How can I use HTML and jQuery to send a button click event to a .py file using AJAX and cgi in web development?

I have encountered a challenge with posting data from button clicks on an HTML page to Python CGI for insertion into a PostgreSQL database. My script seems to be struggling with this task. Here is the structure of my HTML, ajax, and javascript: '&ap ...

javascriptjquerypythonhtmlajax

I'm having trouble getting the npm install for classnames to work within my li tag

I need some help with React JS. I'm attempting to merge my classes using the npm package called classnames. https://www.npmjs.com/package/classnames However, I'm encountering an issue: classnames doesn't seem to be working as expecte ...

javascriptjqueryhtmlreactjsredux

Quiz12 - The Influence of Inheritance on CSS

How will the text size of "Universe" be affected by the following declaration? <div style=”font-size:12px;”>World is<div style=”font-size:0.5em;”>VERY small in <div style=”font-size:100%;”>Universe</div></div>< ...

css

Automatically populating username and password fields

Is it possible to set up automatic username and password filling on my website for users who have saved their login information in their browser? I want the user to just hit enter to login. Some websites already have this feature enabled, but others requi ...

javascriptphphtmlforms

Show a notification on the screen if the source of the iframe is blank

Is there a way to show a message "Please click on a match to get started" when no match link has been clicked? For example, when the iframe does not have an src attribute. My backend is built on Django. Below is the HTML code snippet: </form><b ...

htmljquerycssdjangoajax

Achieving uniform width among flex items

How can I make blocks with the class name .b have equal width? .parent { display: flex; } .parent>div { flex: 1 1 auto; } .parent .b { display: flex; } <div class="parent"> <div class="cell"> <div class="b"></div> ...

cssflexbox

Creating a notification feature for an HTML application

I am in the process of creating an HTML app through intel XDK. While I understand that using HTML to build apps is not as common, it is the language I am most familiar with, along with CSS. One feature I would like to include in my app is a weekly notific ...

htmlioscssipadintel

How can I append the value of an input box to a URL as a parameter upon clicking a button?

I am working on a form with one input field and two buttons, each with different functions. My goal is for one of the buttons to take the value entered in the input field and append it to a specified URL as a parameter when clicked. For example, if the us ...

htmlruby-on-railsrhtml

Is there a way to automatically increase the input id when adding a new row?

I have been working on dynamically adding new inputs and trying to assign a new ID that increments by 1 each time I add a new input. However, I am facing an issue where the value is not incrementing as expected. Can someone please help me identify what&apo ...

jqueryhtml

Can flex-basis be used with percentage in IE11?

Encountering an issue with flexbox and IE10/11. Trying to utilize min-width/max-width values, but IE11 is not cooperating. Discovered flex-basis and used a percentage value, which functions as intended in Chrome but fails in IE11. Experimented with adding ...

htmlcssflexbox

How can I display an HTML document by uploading it and rendering it in VueJs?

I am looking for a way to display HTML documents on the front end of my Vue.js application. My goal is to retrieve the HTML content from my database and render it seamlessly on the user interface. Any suggestions or guidance would be greatly appreciated. ...

htmlvue.js

Request the generic password prior to revealing the concealed div

I want to implement a feature where a hidden div is shown once a user enters a password. The password doesn't need to be stored in a database, it can be something simple like 'testpass' for now. Currently, I have written some code using Java ...

javascripthtml

Text within cells is not wrapping onto a new line in an HTML table

Let me show you how it currently looks: https://i.sstatic.net/OeHRg.png The maximum width of the cell is working properly, but the text is not wrapping to a new line as expected. Instead, it overflows out of the cell. Here is the CSS applied to the tabl ...

htmlcssthymeleaf

Is there a way to verify if an ID includes more than one word?

I am trying to target a specific div with a unique id in jQuery: <div id="picture_contents_12356_title"></div> The '12356' is autogenerated and must be included in the id. I need to create a jQuery selector that combines "picture_co ...

javascriptjqueryhtmlcss

Why are all the values in my list appearing as undefined after parsing with JSON?

Just starting out with this project. I'm attempting to print a list, where the names come from a button. However, all the names are showing up as undefined. I suspect it has something to do with local storage, but I can't pinpoint the issue. < ...

javascripthtmljsonparsing

I'm wondering why my second div is displaying a different size compared to the rest, even though they all share the same container-fluid class

Within the HTML snippet provided, utilizing Bootstrap, all three child divs possess the container-fluid class. However, why does the 2nd div differ from the others? Refer to this example Div Example. Div1 and div4 exhibit the same characteristics, as do d ...

htmlcss

Jquery script to update the background of the parent element when Bootstrap Tabs

Currently, I am exploring ways to come up with a more sophisticated solution. However, my proficiency in jquery is somewhat limited at the moment. I believe there must be a more efficient method to achieve the desired function outlined below. In essence, ...

jquerycsstwitter-bootstrap

What is the best way to turn off the responsive features in Bootstrap 4?

Is there a way to turn off the responsive design in Bootstrap 4 while keeping the styles intact? I prefer users accessing the website on mobile phones to see the same layout as the desktop version and be able to zoom in and out using finger gestures. Any ...

htmltwitter-bootstrapresponsive-designbootstrap-4twitter-bootstrap-4

Issues with centering background-position while using clip-path functionality

Struggling to center a background image? I initially suspected conflicting CSS rules, so I created a simplified demo to troubleshoot. After reviewing examples on SO and beyond, it seems like my approach is correct. Can anyone help identify what I might be ...

htmlcss