Rounded corners on border images

I'm working on styling a div element with gradient borders using CSS, and I want to round the corners as well. Here's my current code:

<div class = "gradborders" id="mydiv" runat="server">
    <!-- various elements -->
  </div>

  .gradborders {
      border-image: -webkit-linear-gradient(45deg, rgba(20,20,20,0.7) 5%, rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch;
      border-image: -o-linear-gradient(45deg, rgba(20,20,20,0.7) 5%, rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch;
      border-image: -moz-linear-gradient(45deg, rgba(20,20,20,0.7) 5%, rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch;
      border-image: linear-gradient(45deg, rgba(20,20,20,0.7) 5%, rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch;
      
      border-radius: 8px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
    }

Despite trying multiple methods, including using the AJAX Rounded Corner extender, I haven't been able to achieve rounded corners for the div. Any suggestions on how to implement this successfully?

htmlcss

Answer №1

Maybe try using a similar approach like this JSFiddle example:

<div class="wrapper">
    <div class="gradient-borders">hello</div>
</div>

And include the following CSS:

.wrapper {
    border-radius: 10px;
    overflow: hidden;
}
.gradient-borders {
    -webkit-border-image: url("http://photos-f.ak.fbcdn.net/hphotos-ak-ash4/1686_520555094669668_1347475803_n.jpg") 8;
}

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

Adjust the CSS within a <style> element using jQuery or javascript

What I aim to accomplish: I intend to dynamically add and modify rules within a <style> tag using JavaScript/jQuery. Reason behind this goal: I am in the process of creating a color scheme editor where changes made by the user should be reflected ...

javascriptjqueryhtmlcss

A strategy for concealing the selected button within a class of buttons with Vanilla JS HTML and CSS

I have encountered a challenging situation where I am using JavaScript to render data from a data.json file into HTML. Everything seems to be functioning correctly, as the JSON data is being successfully rendered into HTML using a loop, resulting in multip ...

javascripthtmlcssjson

Retrieving a particular div element from a different webpage using Javascript/jQuery

How can I load a specific div from another webpage? <div id="result">Loading</div> <script> $( "#result" ).load("http://bte.gep.msess.gov.pt/pesquisa_avancada.php #boxinterior" ); </script> I've tried using j ...

javascriptjqueryhtml

Place Div in the center of another Div

In my maze creation, I am trying to center an inner div, but no matter what I do, using margin: 0 auto; does not seem to work The inner div displays a sad smiley face when the user enters a wall and loses #highlight_lose { width: 550px; height:55 ...

htmlalignmentcentercss

The Bootstrap button is having trouble rendering correctly

I attempted to incorporate a Bootstrap search box in my code, expecting it to display like this: https://i.sstatic.net/bPNsE.jpg However, for some reason, it is not rendering correctly within my layout, which resembles this: https://i.sstatic.net/x3wyk.jp ...

htmlcssbootstrap-4

Unsure of where to place Js and Wordpress assistance - where should it be implemented?

For a while now, I've been avoiding using JavaScript because every time I attempt to understand it, I become more confused. However, I am now in need of it for a website I'm developing... I would like to hide the page until everything loads so t ...

javascriptjquerycsswordpresshide

Detecting collisions with spheres using Three.js Raycaster

I came across an example from a previously answered question on this site: Three Js Object3D Button Group Detect Single Object Click While Mouse Movement Causes Object3D Button Group Zoomi As I tried to customize it to fit my needs, I encountered a few is ...

javascripthtmlthree.jswebgl

Create an HTML file using Jade that is created from user input

My aim is to provide users with the ability to generate a list containing a specific number of entries. For example, if a user inputs "50", a list with 50 entries should be automatically generated. Currently, I am working with Jade and Bootstrap for this ...

javascripthtmlnode.jstwitter-bootstrappug

Display or conceal certain menu items on the Materialize navbar depending on a specified condition

Is there a way to dynamically show/hide the navigation bar depending on the type of user logged in? For example, one user may have access to 4 menu items while another may only have access to 3. Here is an image for reference: https://i.sstatic.net/hCVD3. ...

jqueryhtmlcssnavbarmaterial-ui

Some examples of CSS styling that makes the parent element shorter than the child element

Currently, I am engaged in a project aimed at enhancing my understanding of Spring MVC practices. As part of this endeavor, I have embarked on the development of a simplified version of Twitter. Essentially, users can log in, share brief updates, and view ...

htmlcssstyles

Experiencing the appearance of a scroll bar upon adjusting the padding of mat-dialog-container to 0

One issue I encountered was with a Dialog Box that has a blue top Bar using the mat-dialog class and styling from the mat-dialog-container. The default style of the mat-dialog-container was causing some problems before, but I managed to solve it by creatin ...

cssangular-material

Avoid loading cached images stored in the HTML5 FileSystem API

Utilizing the FileSystem API, I am actively saving images to the HTML5 filesystem. Every few minutes, these images are reloaded and replaced from a server side function. Following each reload and replacement cycle, these images are displayed on a website. ...

javascripthtmlimagehtml5-filesystem

What could be causing my CSS to go unnoticed in my R Shiny application?

Explore the tooltip configuration I've implemented for the info icon in the code snippet below: library(shiny) ui <- fluidPage( span( `data-toggle` = "tooltip", `data-placement` = "auto", `data-trigger` = "cli ...

jquerycssrshinytooltip

Ionic Troubleshoot: Issue with Reading Property

Encountering an error: A TypeError occurs: Cannot Read Property of "username" of Undefined The HTML code responsible for the error is as follows: <ion-content padding style="text-align: center; margin-top: 35px"> <form (ngSubmit)="logFor ...

htmlangularionic-frameworkauthenticationcredentials

What is the best way to ensure that table cells containing images resize without any issues?

I need help with centering and resizing an image on a screen. The image is divided into small images within cells, but I can't seem to get it right. Despite trying various solutions and spending hours resizing the table and images, the final output a ...

htmlcsshtml-table

Tips for effectively searching for an element at a specific index

In the DOM structure provided, there are multiple div elements with different classes nested within each other. <div id="container"> <div class="item"></div> <div class="item"></div> <div class="another-container"> ...

javascripthtmlcssdom

AngularJS telephone input

In my opinion, AngularJS does not properly respond to input[type=tel]. There is a lack of online documentation regarding this issue. I have tried using ng-model, ng-value, and value but none of them seem to work. -- Has anyone figured out how to input ...

htmlangularjs

Displaying left and right div elements alongside each other in HTML/CSS works in Chrome, but not in Safari or Firefox

I've encountered an issue with aligning divs side by side in Firefox and Safari, although it seems to be working perfectly in Chrome. It's a bit tricky to provide all the CSS code as I have different stylesheets for mobile, normal, and print vers ...

htmlcssgoogle-chromesafarialignment

Numerous toggles paired with various forms and links

I am currently facing an issue with toggling between forms on my website. Although the toggle functionality works fine, I believe I may have structured the steps in the wrong order. My ideal scenario is to display only the 'generating customer calcul ...

javascriptjqueryhtml

Unique symbols within HTML tags

Many times when the topic of HTML attributes is brought up, people are referring to the value of the attribute. However, I am interested in discussing the actual attributes themselves. Would you consider the following code snippet to be valid? <a href= ...

htmlrfc