CSS "border-clip" splitting the border in half

I found a great CSS tutorial on how to style borders with images. The tutorial can be found here. The example result of following the tutorial looks like this: https://i.sstatic.net/pgJhM.png

One interesting thing I learned from the tutorial is using background-clip: padding-box; to prevent the background from showing through the border image. Now I'm curious if it's possible to clip the background only halfway through the border to achieve a similar look as in this edited paint illustration: https://i.sstatic.net/1dmg0.png

Just to clarify, I do not want the result where the background-clip declaration is removed completely: https://i.sstatic.net/uo0Ft.png

UPDATE:

I came across the property border-image-outset, which seems promising, but unfortunately setting it to a negative value doesn't work.

LATEST UPDATE:

Any solutions provided should consider cases where dimensions are unknown, such as when the width property is set as a percentage.

htmlcss

Answer №1

If you already know the size of the border, there is a clever way to use background-size, calc(), and a gradient to create the background color:

div {
  width: 300px;
  padding: 20px;
  margin: 10px auto;
  line-height: 3;
  /*background-color: #f66;*/
  /*background-clip: padding-box;*/
  /* replace with : */
  background:linear-gradient(#f66,#f66) no-repeat center center;
  background-size: calc(100% + 20px) calc(100% + 20px);
  text-align: center;
  /* border-related properties */
  border: 20px solid black;  
  border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
  border-image-slice: 40;
  border-image-repeat: round;
}
<div>
  <p>Border image</p>
</div>

When borders of 20px are combined, they add up to 40px in width on each side. Increasing the background-size by 20px using calc() will only cover half of the areas taken up by the borders.

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

Bootstrap card restricting ul tag from occupying full width

Utilizing Bootstrap in my WordPress site, I employed the bootstrap grid system to split the page contents into two sections, one of which includes a card acting as a navigation menu. However, the <ul> element is failing to expand to full width. Wit ...

htmlcsswordpressbootstrap-4

The issue of overflow scrolling not functioning properly on fixed-positioned elements in iOS is

On mobile devices / sizes, I have a navigation bar with position: fixed at the bottom of a page. The nav bar includes an overflow container for scrolling right to see more links (although I personally believe this design choice leads to poor user experienc ...

javascriptjqueryhtmlcsstwitter-bootstrap

CSS Styling to Align Form in Table Cell

I have some old HTML code without a CSS framework, so I'm using tables for layout. My current challenge is trying to horizontally center my form, while keeping the form fields left-aligned. Essentially, I want to achieve the following design: +------ ...

htmlcss

Issue with jQuery UI: Accordion not functioning properly

I have created a nested sortable accordion, but there seems to be an issue. Within the 'accordion2' id, the heights of each item are too small and a vertical scroll bar appears. The content of the item labeled '1' is being cut off, show ...

javascriptjqueryhtmljquery-ui

Placing MySQL information into a container

Currently working on a tutorial and attempting to update the styling. While I understand that the code may not be up-to-date, breaking it down into parts is aiding my comprehension of the whole. I am exploring the idea of inserting MySQL data into divs in ...

phpjqueryhtmlmysqlcss

When using Semantic UI, displaying a list item with an image causes the text to be

I recently came across an interesting example on the Semantic UI website showcasing lists with items containing images positioned to the left. To view the example, visit: Everything seemed to work fine until I noticed that when using a long block of text ...

htmlcsssemantic-ui

Preventing Jquery Append from Adding Previous Elements

I am struggling to figure out how to display the star rating for each hotel individually. I have 5 hotels, each with a different star rating. Here is my Javascript code: function GetStarHotel() { var parent = $(' p.star '), imagePat ...

javascriptjqueryhtml

Is it possible to apply a slanted CSS3 line-through effect on text?

Can CSS3 be used to create a slanted strike-through line over text, starting from the bottom-left and going to the top-right in a diagonal direction? ...

cssstyling

Delete the radio button list within the content placeholder

I'm having trouble with accessing elements by name on a master page content placeholder. Can someone assist me with this issue? Thank you in advance. <asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <script type="tex ...

javascriptjqueryhtmlasp.netajax

A guide on creating a clickable polygon in Vue.js using Konva

Is there a way to create an interactive polygon in Vue Konva where I can set each corner with a click? I haven't been able to find any resources other than the v-polygon which only creates predefined polygons. ...

javascripthtmlvue.jskonvajsvue-konva

"How to automatically populate an input field with a value when the page loads in an

I need assistance with setting the input value to 1 when the page is loaded, but for some reason, it remains empty. Can someone help me troubleshoot this issue? <tr *ngFor="let item of cartItems; let i=index"> <td class="cart_pr ...

javascripthtmlangular

Removing a Row from an HTML Table with JavaScript

I am currently facing an issue with my JavaScript code that is intended to delete a row from an HTML table. Additionally, I have a JavaScript code snippet that generates a column dynamically at runtime with a delete anchor tag. var tbody = document.getEl ...

asp.netjavascripthtml

The toggleClass() function appears to be functioning properly in all browsers except for IE11

Check out my code snippet: Using Jquery: $("#welcome-done").on("click", function(){ $(".welcome-box").toggleClass("hide"); }) In the CSS: .hide { display: none; } .welcome-box { padding-left: 0; background-color: white; border-radi ...

jqueryhtmlcssweb

Issue with ng-repeat causing problems with Bootstrap table functionality

<div ng-controller="reportCtrl"> <table class="table table-hover"> <thead class="row col-md-3"> <tr class="row"> <th class="col-md-6">Key </th> <th cla ...

javascripthtmlangularjstwitter-bootstrap

Is there a way to modify the color of a specific section of a font icon?

Currently, I am in the process of implementing an upvote button using fa fa signs. However, I have encountered an issue where the background color of the up vote button is bleeding outside of the sign (possibly due to padding on the icon), and I am strivin ...

javascripthtmlcssfont-awesome

Are there any real-world examples you can share of utilizing CSS 3D Transforms?

Can you provide any instances of CSS 3D Transforms being utilized in real-world projects besides and ? ...

csscss-transforms

Remove a row from one table by selecting a cell in a different table

I have a situation where I have two different tables side by side: one with only one column and the other with multiple columns. My goal is to be able to delete a row in the multi-column table by clicking on a cell in the single-column table that correspon ...

javascriptjqueryhtml

Creating custom designs for a HTML button using CSS

Within an HTML form, there are two buttons set up as follows: <button kmdPrimaryButton size="mini" (click)="clickSection('table')">Table View</button> <button kmdPrimaryButton size="mini" (click)=&quo ...

htmlcsstypescript

Encountering a problem with the syntax '[checked]= true' in Angular2

I am currently working on a system for managing orders within restaurants using an angular2 application. The code I have is as follows: <md-radio-group> <span *ngFor="let extIng of item.extra_ingredients;"> <md-radio-button *ngIf= ...

htmlangulartypescriptangular-material2

What is the best way to create a read-only input field?

https://i.sstatic.net/36h6s.png The code I attempted to use did not produce the desired result <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f ...

htmlbootstrap-5