CSS - uniform sizing for border images

INQUIRY: I am looking for a way to maintain a consistent border image size when resizing a div. I have considered using pseudo elements, but I'm wondering if there is a simpler solution?

HTML:

<div id="resizable" class="ui-widget-content">
  <h3>Resizable</h3>
</div>

CSS:

body {
  background: white;
}
#resizable {
  border: 25px solid !important;
  border-image: url(https://svgur.com/i/9c2.svg) 15 round !important;
  background: white
}

VISUAL:

https://i.sstatic.net/L365l.gif

JSFIDDLE: https://jsfiddle.net/3twuq14z/

cssjquery-uijquery-ui-resizable

Answer №1

Simply include the following attribute in your SVG file: 

vector-effect="non-scaling-stroke"
within the SVG path element. You can see an example of this in action by visiting this link (I have uploaded your SVG file again): https://jsfiddle.net/dswLmaxo/

Answer №2

Of course, you have the ability to:

$("#resizable").resizable({
 aspectRatio: 9/ 9,
 });

body {
  background: white;
}
#resizable {
  border: 25px solid transparent;
  border-image: url(https://svgur.com/i/9c2.svg) 30 round;
  background: white;
  width:100px;
  height:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="resizable" class="ui-widget-content">
  <h3>Resizable</h3>
</div>

https://jsfiddle.net/3twuq14z/2/

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

Modifying CSS post-rendering to accommodate right-to-left or left-to-right text orientation

I have a unique single-page JavaScript website that retrieves text from a web request in JSON format. The direction of the text (RTL or LTR) is only determined once the response is received. Is there a method to re-render the page after receiving the res ...

css

Dynamic Website Layout Bootstrap 4 [ card designs and Tabs ]

Currently, I am in the process of developing a web application that needs to be responsive across various devices including mobiles, tablets, and PCs. My focus right now is on creating a user profile page that adapts well to different screen sizes. To achi ...

htmlcssbootstrap-4

how to show an error in a modal window when encountering an error

Using Blazor and Blazorstrap, typically when the server disconnects, an "Error" message is displayed. However, with the BsModal from Blazorstrap, it appears in the background layer, making it unresponsive. How can this be fixed? Is it possible to close the ...

javascriptcssbootstrap-4blazor-server-side

Utilizing background image CSS class repetitively

I have a button background class that I want to reuse multiple times. How can I keep all the common styles separate and only change the URL multiple times? Here is my CSS: .menuBtnColour{ position: relative; //common top: 0;//common left: 0;/ ...

htmlcss

Make the element switch from hidden to visible when hovering over it using CSS

I had a challenge to only show some rating text on my website when I hovered over it. Being new to coding with CSS and JavaScript, I was experimenting with overriding styles using the Stylebot extension in Chrome. I encountered an issue while trying to mo ...

javascripthtmlcss

Struggle with typescript integration with emotion and styled components

Issue Description: I encountered an issue while working with typescript and emotion/styled libraries. When attempting to specify the type of the parent component that wraps a styled component, I faced difficulties. The scenario involves a parent componen ...

cssreactjstypescriptstyled-componentsemotion

Display movie details in a responsive column layout that condenses into a single column

I'm having trouble displaying movie information on a website due to CSS and HTML issues. My goal is to align the title (Director:, Cast:, etc) with the first item in the list, and have all subsequent items follow below. I initially tried using a defin ...

htmlcssmobilehtml-listshtml-table

Discover an effective way to display Ajax search results above a different div element!

I am having trouble with positioning my search results on top of other divs. To see the issue, you can watch the screen recording by clicking on this link: https://drive.google.com/file/d/1kU_vl2ZAmSCok0pxnTTvY hacxqcZZ9m_/view?usp=sharing These are the s ...

htmlcss

Tips on positioning the down arrow of an accordion-button to the left

I need to adjust the placement of the down arrow on an accordion button for my Arabic language website. Here is the current code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

htmlcssbootstrap-5

Position Bootstrap 5 modal footer elements to the left and right for an enhanced visual

Can anyone assist me with customizing the Bootstrap 5 modal footer? I am looking to align a text (either using span or label) to the left and a button to the right within the modal footer. I came across this solution and attempted to implement it by cha ...

htmlcssbootstrap-5bootstrap5-modal

Top technique for creating a unique cursor image for a website

I'm looking for the most efficient way to create a custom cursor image for my CSS/HTML5 website without using Flash. Ideally, I would like to implement this using CSS rather than resorting to Javascript. If Javascript is necessary, I want to know whic ...

javascriptcsscursor

Tips for updating WordPress without changes appearing live right away

I want to quickly and easily make CSS changes to a WordPress website without doing it live. Is there a way to make these changes locally and then upload them? What is your recommendation? Some people have mentioned that making changes locally can be diffi ...

phpcsswordpress

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

I have a question... If you're interested in conditional styling, the best approach is to utilize either ng-class or ng-style. However... For instance, let's say I'm an admin and I would like to customize the color of my application using ...

javascripthtmlcssangularjs

Tips for preventing the direct copying and pasting of JavaScript functions

Repeating the process of copying and pasting functions such as loadInitialValue(), loadInitialValue2(), loadInitialValue3(), is quite monotonous. This is the repetitive code snippet that I have been working on (when you click on "Mark as Read," the title o ...

javascripthtmlcsslocal-storage

tips for creating a jquery/css scales animation

I am looking to implement a unique feature on my website where I create scales with a balancing effect. The scales should mimic an up and down motion continuously. You can see an example of what I'm referring to here Is there a way in jQuery or CSS t ...

jqueryhtmlcssjquery-animate

Wrapping content in flexbox and aligning it justified

I have an issue where I want to display a page title on the left side and a rating number with stars on the right side. My goal is to center all items once flexbox wraps. Specifically, when the "Longer Page Title" reaches the rating and stars and the flexb ...

cssflexbox

Meteor JS failed to load the CSS file due to an unsupported MIME type

Currently, I am working on a meteor js 1.8 app. I have created a layout and now I want to add CSS to it. Here is the structure I am following: imports -ui --stylesheets --bootstrap.min.css --font-awesome.min.css --skins.css --forms.css All my CSS files ...

javascriptjquerycssnode.jsmeteor

Tips for creating a dynamic menu with animated effects

Check out my fiddle here: http://jsfiddle.net/k3AHM/23/ $(document).scroll(function () { var y = $(this).scrollTop(); if (y > 110) { $('.menu-container').addClass( "fix-menu" ).animate('top', '-3px&a ...

javascriptjquerycss

Place the two buttons in position

I have a section where I need to include two buttons. One button on the left labeled "Sunday" and one on the right labeled "misc". I want the two buttons to be evenly placed within the area, so I assigned them the same class since they are the same size. ...

htmlcss

Getting the nth-child rule for CSS in IE9 to function properly in IE8

This code is functioning in IE9: body.country-XYZ .abc:nth-child(3) { display:none; } As :nth-child() is effective in IE9 and newer versions, what can be done to ensure it also functions on IE8? Can you suggest an alternative method for achieving th ...

cssinternet-explorer-8