Can a border like this be achieved using only CSS, or will I need to use an image?
Can a border like this be achieved using only CSS, or will I need to use an image?
If you're looking for a solution using pure CSS, here's one approach:
.double-gradient-box {
margin: auto;
padding: 15px;
width: 275px;
height: 200px;
border: 15px solid transparent;
border-top: 10px solid transparent;
border-image: linear-gradient(to bottom, transparent, #FBCDEA) 3 100%;
box-shadow: 0 15px 0 0 #FBCDEA, 0 -5px 0 0 #F7FCFF, inset 0px 15px 0 0 #FBCDEA;
background-image: linear-gradient(#FBCDEA, transparent), linear-gradient(#FBCDEA, transparent);
background-size: 15px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
border-radius: 7px;
}<div class="double-gradient-box">
Your Content Here
</div>Once you run the snippet, check the result in the "Full Page" view. This example does not include all cross-browser properties.
This technique creates a double gradient border effect by applying a gradient border and using a box-shadow inset to enhance the effect within the element. A padding is also necessary to contain the content. The background-image displays two gradient bars on either side of the inset.
could this be the solution?
*{
box-sizing: border-box;
}
.wrap{
width: 300px;
height: 300px;
padding: 20px;
margin: 25px auto;
border-radius: 10px;
background: rgb(254,249,253); /* Old browsers */
background: -moz-linear-gradient(top, rgb(254,249,253) 0%, rgb(253,230,246) 50%, rgb(253,204,234) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(254,249,253)), color-stop(50%,rgb(253,230,246)), color-stop(100%,rgb(253,204,234))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(254,249,253) 0%,rgb(253,230,246) 50%,rgb(253,204,234) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(254,249,253) 0%,rgb(253,230,246) 50%,rgb(253,204,234) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(254,249,253) 0%,rgb(253,230,246) 50%,rgb(253,204,234) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgb(254,249,253) 0%,rgb(253,230,246) 50%,rgb(253,204,234) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef9fd', endColorstr='#fdccea',GradientType=0 ); /* IE6-9 */
}
.wrap div{
width: 100%;
height: 100%;
padding: 20px;
}
.wrap .inner{
background: rgb(253,204,234); /* Old browsers */
background: -moz-linear-gradient(top, rgb(253,204,234) 0%, rgb(253,230,246) 50%, rgb(254,249,253) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(253,204,234)), color-stop(50%,rgb(253,230,246)), color-stop(100%,rgb(254,249,253))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(253,204,234) 0%,rgb(253,230,246) 50%,rgb(254,249,253) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(253,204,234) 0%,rgb(253,230,246) 50%,rgb(254,249,253) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(253,204,234) 0%,rgb(253,230,246) 50%,rgb(254,249,253) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgb(253,204,234) 0%,rgb(253,230,246) 50%,rgb(254,249,253) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdccea', endColorstr='#fef9fd',GradientType=0 ); /* IE6-9 */
}
.wrap .item{
background: #fff;
}<div class="wrap">
<div class="inner">
<div class="item"></div>
</div>
</div>I suggest utilizing the border-image CSS property for creating unique border effects.
.top-to-bottom {
border-bottom: 10px solid trasparent;
border-width: 10px;
border-style: solid;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(#FBCDEA, rgba(0, 0, 0, 0)) 1 1;
-moz-border-image: -moz-linear-gradient(#FBCDEA, rgba(0, 0, 0, 0)) 1 1;
-o-border-image: -o-linear-gradient(#FBCDEA, rgba(0, 0, 0, 0)) 1 1;
border-image: linear-gradient(to bottom, #FBCDEA, rgba(0, 0, 0, 0)) 1 1;
height: 100px;
width: 97%;
border-top: 10px solid #FBCDEA;
}
.bottom-to-top {
border-top: 10px solid trasparent;
border-width: 10px;
border-style: solid;
-webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(#FBCDEA), to(rgba(0, 0, 0, 0))) 1 1;
-webkit-border-image: -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 1;
-moz-border-image: -moz-linear-gradient(bottom, #FBCDEA, rgba(0, 0, 0, 0)) 1 1;
-o-border-image: -o-linear-gradient(bottom, #FBCDEA, rgba(0, 0, 0, 0)) 1 1;
border-image: linear-gradient(to top, #FBCDEA, rgba(0, 0, 0, 0)) 1 1;
border-bottom: 10px solid #FBCDEA;
height: 100%;
width: 98%
} <div class="bottom-to-top">
<div class="top-to-bottom">
</div>
</div>I'm a beginner in jQuery and I have this code snippet that displays a div when a specific link on a map is hovered over: <div id="locationmap"> <a class="linkhide" id="link1" href="#">Occupier 1</a> <a class="linkhide" id ...
On a button, I have a URL that looks like this: www.mywebsite.com/infopage?scrollTo=section-header&#tab3 After clicking the button, it takes me to the URL above and opens up the tab labeled tab3, just as expected. However, I would like it to direct m ...
I have a PHP snippet that adds arrow indicators next to previous and next sections on a page. This allows users to easily navigate between sections by clicking on the arrows. The desired output format is: (arrow) Previous Section Next Section ...
I'm trying to keep the text centered inside a spinning div by using absolute positioning on the children. I haven't found a solution yet, but I attempted to position it absolutely and disable the transition in the child element. I've include ...
I have created a form that contains radio buttons. My next goal is to include a text area next to each group of radio buttons. This will allow the user to select an option either by clicking on the radio button or by typing in the corresponding value in t ...
I'm currently working on a new design and I need to retrieve the name of the class from a div element that is positioned above another div element. Here's an example: <div class="random name a"></div> <div class="the name of this ...
Trying to keep a three-column div from spilling over the page can be tricky. The first two columns must not exceed 200px, while the third column should be at least 280px wide. The issue arises when there is a table in the third column with long sentences i ...
How can I make a div stretch to the height of its parent using Bootstrap 3.0.2 without using a script? Check out the fiddle linked below. In this example, I want to stretch the blue container to match the height of the parent green container. View Fiddle ...
I have integrated github's create check run API to create a check run for my pull request. The JSON structure I am using for the request body is as follows: { "name" : name, "head_sha" : script.env.CI_COMMIT_SHA, ...
My issue is with a javascript function that I've called on the html unload event. It seems to be working fine in Google Chrome, but for some reason it's not functioning properly in Firefox and IE. <script> function fun() { ...
I am brand new to the world of JavaScript and currently grappling with setting a value in an input field based on the onchange event of another input field. Here is my code sample for input field 1: <input type='text' onchange='methodTh ...
Looking for some guidance on handling the response from an AJAX call. Here's what I'm trying to achieve: Initiate an AJAX call to my Rails application to retrieve an HTML document. In the Rails controller, access the HTML document stored on dis ...
I am trying to implement a searchable list of buttons on my website, but I haven't been able to find a solution that fits exactly what I have in mind. Currently, I have a list of buttons coded as inputs and I want to add a search field that will filte ...
How can I change the color of specific keywords in a gridview cell without affecting all words? Here is the sample code: protected void gvContents_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) ...
Currently, I am working on a small project using Angular and Twitter Bootstrap. However, I have encountered a problem. I am trying to create a template that displays content in full screen upon clicking a button. The issue is that the iframe I am using wor ...
I have implemented Simplexml within a class to load specific nodes from my xml file into html. <?xml version="1.0" encoding="UTF-8"?> <note> <item> <title>Reminder</title> </item> <item> ...
I am encountering an issue with a modal that pops up on my webpage when clicked. It is perfectly centered in a browser view and smaller views. However, when I resize the page for phones, the modal shifts down the page and requires scrolling to see it. How ...
Is it possible to create an inner border with unique values for each side? For instance: Top: 20px Right: 80px Bottom: 40px Left: 10px Can you provide an example of how this can be achieved? Thank you! :) ...
As I delve into using responsive images, a question has arisen. On my website, there is an icon that comes in two sizes: a small version measuring 74 pixels wide and a larger version at 94 pixels wide. <img alt="Section Gino" style="background-color: ...
I am still learning about this and I have been following some tutorials online. I managed to make the columns work with paragraph tags, but when I use ul > li tags, the image takes up the entire space. I'm not sure what's causing this issue. ...