I need to create a button like the one below, but it's proving exceedingly difficult to get that border effect without the use of images:
.
Specifically, the border effects I've seen never have a bevel effect - it's almost as though I need two borders. The colors, shape, and other aspects of the button are not the problem here.
Here's what I have so far, which is pretty close:
button {
border: 1px solid gray;
border-radius: 4px;
text-align: center;
display: inline-block;
padding: 5px 10px;
background: linear-gradient(to bottom, #f9fcff 0%,#93a0c6 100%);
}
<button>OK</button>
You can achieve this effect with one element, using a background: linear-gradient, double border and border-radius.
To apply the background even to the transparent middle part of the border, increase the size of the background (i.e. 140%) and adjust its position.
button {
background: linear-gradient(to bottom, #fff 0%, #8ab 100%);
background-size: 140%;
background-position: 0 50%;
border: 4px double #23538a;
border-radius: 6px;
padding: 5px 8px;
color: #23538a;
}
<button>OK</button>
This will get you close. Use a combination of box-shadow, padding, and 'border-radius`:
.btn-container {
display:inline-block;
border: solid 1px #224488;
border-radius: 4px;
padding: 2px;
background:#acd;
box-shadow:0px 4px 6px #cde inset;
}
.btn {
display:inline-block;
border: solid 1px #224488;
border-radius: 4px;
padding: 2px;
background:#acd;
box-shadow:0px 5px 10px #e0f0ff inset;
}
<div>
<span class='btn-container'>
<span class='btn'>Click here!</span>
</span>
</div>
Fiddle: https://jsfiddle.net/oqqpccmf/
Related
Ok, so I wish to create something like http://i.imgur.com/jox0ENW.jpg. But be of a modular type, where I might have a button class that'll make it look like that, and a class I can use to apply to sections.
Right now I have:
.double-drop {
position: relative;
padding: map-get($padding, xl);
margin-top: (-1 * 280px);
border: 3px solid $black;
background-color: $white;
&:before {
content: '';
position: absolute;
z-index: -1;
top: (-1 * map-get($padding, m));
right: (-1 * map-get($padding, m));
width: 100%;
height: 100%;
border: 3px solid $black;
background-color: $lighter-grey;
}
}
Which works, and creates that effect on sections. But not if the section is inside a parent which is absolutely positioned. (the drop shadow goes behind..)
I would like to imitate that effect in the image, for all my buttons, and obviously transition its translate so it moves or what not.
Would it be possible first of all?
Multiple Borders on CSS Only Button
Perhaps using multiple shadows as borders would be a simple solution? It degrades gracefully in browsers that don't support it, and it's easy to work with.
JSFiddle Example
.shadow-button {
padding:10px;
border:solid 3px #000000;
display:inline-block; /* used only to shrink wrap the div around the contents, has a default margin */
-webkit-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
-moz-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
font-family:Verdana, Tahoma, Arial, sans-serif;
font-weight:bold;
}
p {padding:10px;}
<div class="shadow-button">PLAY MUSIC VIDEO</div>
Browser Support: http://caniuse.com/#search=box
This question already has answers here:
Two color borders
(12 answers)
Closed 1 year ago.
With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow.
On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible?
NOTE: I'm giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a dynamic look so that it feels like an inset element, and the white element is pillow embossed. So thing is a bit:
div.white{
border: 2px solid white;
border: 1px solid grey;
}
But you know it's a double declaration, and is invalid. So how can I manage such thing in CSS?
And if I put border-style: double then you know I can't pass two different color for the singe double border.
div.white{
border: double white grey;
}
Additionally, I'm familiar with LESS CSS Preprocessor. So if such a thing is possible using CSS Preprocessor, please let me know.
Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
padding: 2em;
width: 16em;
height: 16em;
position: relative;
margin: 0 auto;
}
.double-border:before {
background: none;
border: 4px solid #fff;
content: "";
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
pointer-events: none;
}
<div class="double-border">
<!-- Content -->
</div>
If you want borders that are consecutive to each other (no space between them), you can use multiple box-shadow declarations (separated by commas) to do so:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
box-shadow:
inset 0 0 0 4px #eee,
inset 0 0 0 8px #ddd,
inset 0 0 0 12px #ccc,
inset 0 0 0 16px #bbb,
inset 0 0 0 20px #aaa,
inset 0 0 0 20px #999,
inset 0 0 0 20px #888;
/* And so on and so forth, if you want border-ception */
margin: 0 auto;
padding: 3em;
width: 16em;
height: 16em;
position: relative;
}
<div class="double-border">
<!-- Content -->
</div>
I use outline a css 2 property that simply works. Check this out, is simple and even easy to animate:
.double-border {
display: block;
clear: both;
background: red;
border: 5px solid yellow;
outline: 5px solid blue;
transition: 0.7s all ease-in;
height: 50px;
width: 50px;
}
.double-border:hover {
background: yellow;
outline-color: red;
border-color: blue;
}
<div class="double-border"></div>
you can add infinite borders using box-shadow using css3
suppose you want to apply multiple borders on one div then code is like:
div {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3 */
outline: 5px solid hsl(0, 0%, 60%);
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
}
Use of pseudo-element as suggested by Terry has one PRO and one CON:
PRO - great cross-browser compatibility because pseudo-element are supported also on older IE.
CON - it requires to create an extra (even if generated) element, that infact is defined pseudo-element.
Anyway is a great solution.
OTHER SOLUTIONS:
If you can accept compatibility since IE9 (IE8 does not have support for this), you can achieve desired result in other two possible ways:
using outline property combined with border and a single inset box-shadow
using two box-shadow combined with border.
Here a jsFiddle with Terry's modified code that shows, side by side, these other possible solutions. Main specific properties for each one are the following (others are shared in .double-border class):
.left
{
outline: 4px solid #fff;
box-shadow:inset 0 0 0 4px #fff;
}
.right
{
box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}
LESS code:
You asked for possible advantages about using a pre-processor like LESS. I this specific case, utility is not so great, but anyway you could optimize something, declaring colors and border/ouline/shadow with #variable.
Here an example of my CSS code, declared in LESS (changing colors and border-width becomes very quick):
#double-border-size:4px;
#inset-border-color:#fff;
#content-color:#ccc;
.double-border
{
background-color: #content-color;
border: #double-border-size solid #content-color;
padding: 2em;
width: 16em;
height: 16em;
float:left;
margin-right:20px;
text-align:center;
}
.left
{
outline: #double-border-size solid #inset-border-color;
box-shadow:inset 0 0 0 #double-border-size #inset-border-color;
}
.right
{
box-shadow:0 0 0 #double-border-size #inset-border-color, inset 0 0 0 #double-border-size #inset-border-color;
}
You can use outline with outline offset
<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}
Maybe use outline property
<div class="borders">
Hello
</div>
.borders{
border: 1px solid grey;
outline: 2px solid white;
}
https://jsfiddle.net/Ivan5646/5eunf13f/
Try below structure for applying two color border,
<div class="white">
<div class="grey">
</div>
</div>
.white
{
border: 2px solid white;
}
.grey
{
border: 1px solid grey;
}
You can use the border and box-shadow properties along with CSS pseudo elements to achieve a triple-border sort of effect. See the example below for an idea of how to create three borders at the bottom of a div:
.triple-border:after {
content: " ";
display: block;
width: 100%;
background: #FFE962;
height: 9px;
padding-bottom: 8px;
border-bottom: 9px solid #A3C662;
box-shadow: -2px 11px 0 -1px #34b6af;
}
<div class="triple-border">Triple border bottom with multiple colours</div>
You'll have to play around with the values to get the alignment correct. However, you can also achieve more flexibility, e.g. 4 borders if you put some of the attributes in the proper element rather than the pseudo selector.
I've found cool article http://www.tripwiremagazine.com/2012/01/how-to-create-a-seach-bar-in-photoshop.html recently. Don't know how to handle background images inside responsive grid. How do I make such a search bar using Zurb Foundation grid? Is it possible?
Thanks!
The search bar in the design could be styled completely with CSS and then you wouldn't have to use background images at all. Here are a few main points of code that would make this work:
HTML:
<div class="input-container">
<input type="text" />
<button>Search</button>
</div>
The text input:
input[type="text"] {
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
border-radius: 5px;
background-color: #fff;
}
the button:
button {
margin-left: -10%;
background-image: -webkit-linear-gradient(top, #117a03 0%,#287c15 100%);
border-radius: 0 5px 5px 0;
height: 32px;
padding: 0 5px;
border: 1px solid #bbb;
box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px #fff;
color: #074F03;
text-shadow: 0px 1px #ccc;
font-weight: bold;
}
You need to add the vendor prefixes for CSS3 properties, but this is a pretty basic starting point and should give you everything you need. Here's a fiddle with it working: http://jsfiddle.net/J6Dvz/
Okay first the code..
<td class="btnSaveBooking">
<div class="btnSaveBookingContainder">
<div id="save">
<span class="btnImage"></span><span class="btnsavebookingspan">
<input type="submit" style="color:White;background-color:#6086AC;border-color:White;border-width:2px;border-style:Solid;font-family:Verdana;font-size:10pt;font-weight:bold;" id="btnSaveBooking" value="" name="btnSaveBooking">
(F8)</span></div>
</div>![enter image description here][1]
</td>
The images
Normal
OnMouseOver at the button
OnMouseOver at the imaage
As you can see, when user hovers exactly over the image, then only is the background of image changing, what I want is, when user even hovers over this button, the image should change.
Here's the css
.btnSaveBooking {
border-top: 1px solid #7abbde;
background: #1776a6;
background: -webkit-gradient(linear, left top, left bottom, from(#7ec5e8), to(#1776a6));
background: -webkit-linear-gradient(top, #7ec5e8, #1776a6);
background: -moz-linear-gradient(top, #7ec5e8, #1776a6);
background: -ms-linear-gradient(top, #7ec5e8, #1776a6);
background: -o-linear-gradient(top, #7ec5e8, #1776a6);
padding: 2px 20px 3px 4px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #f7f7f7;
font-size: 17px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.btnSaveBooking:hover {
border-top-color: #000000;
background: #7288c9;
color: #ffffff;
}
.btnSaveBooking:active {
border-top-color: #3c637d;
background: #3c637d;
}
#save .btnImage
{
background: url("../images/save.png") no-repeat scroll 2px 5px transparent !important;
border-color: transparent !important;
height: 24px;
position: relative;
width: 28px;
margin: 1px 1px 1px 10px;
padding: 4px 2px 0 20px;
}
#save .btnImage:hover
{
background: url("../images/saveN.png") no-repeat scroll 2px 5px transparent !important;
cursor: pointer;
}
You just need to change where the text ':hover' appears in your rule. As it stands, the img itself needs to be hovered. Change the rule so that when it's parent is hovered it changes.
I.e
#save .btnImage:hover
becomes
.btnSaveBooking:hover .btnSaveBookingContainder .btnImage
This way, the image changes as the button's background does. The answer already given gives you a 'two-stage' approach to the change.
Please try this:
.btnSaveBookingContainder:hover .btnImage
{
background: url("../images/saveN.png") no-repeat scroll 2px 5px transparent !important;
cursor:pointer;
width:28px;
height:31px;
}
remove the #save .btnImage:hover css from your existing css, and try with the following style format,
.btnSaveBooking:hover{
/* over border, background & text color */
}
.btnSaveBooking:active
{
/* active border, background & text color */
}
.btnSaveBooking:hover #save .btnImage{
/* provide your hover image style */
}
.btnSaveBooking:active #save .btnImage{
/* provide your active image style */
}
I guess the title is kind of hard to understand, so I'll explain.
I am trying to achieve this effect:
(a box which has rounded corners and its border, which also has rounded borders).
I've managed to do this, by using the background-clip property:
(rounded corners for border but not for inner box)
The question is, how can I achieve rounded corners for the inner box?
Thank you!
EDIT
The HTML I am using:
<header class="body template-bg template-border radius-all">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
And the CSS:
.radius-all {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.template-bg {
background: #FFF;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
.template-border {
border: 5px solid rgba(255, 255, 255, 0.2);
}
Inner border calculations
First, you'll need to remove -vendor-background-clip: padding-box or set them to border-box the default in order to achieve the inner border radius.
The inner border radius is calculated as the difference of the outer border radius (border-radius) and the border width (border-width) such that
inner border radius = outer border radius - border width
Whenever the border-width is greater than the border-radius, the inner border radius is negative and you get some awkward inverted corners. Currently, I don't believe there is a property for adjusting the inner-border-radius, so you'll need to calculate it manually.
In your case:
inner border radius = 6px - 5px = 1px
Your new CSS should be:
.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }
Simply subtract the border-radius (6px) values from the border-width value (5px) in order to achieve your desired inner-border-radius:
Code that works for me
Tested on Firefox 3.x, Google Chrome, and Safari 5.0
.radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */
Adding color overlays in JavaScript
<script type="text/javascript">
var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;
// insert opacity decreasing code here for hexadecimal
var header = document.getElementsByTagName('header')[0];
header.style.backgroundColor = bodyBgColor;
</script>
I'm not entirely sure how to do hexadecimal arithmetic in JavaScript but I'm sure you can find an algorithm in Google.
Applying General Borders
Are you using a separate box <div> for your border through its background property? If so, you'll need to apply border-radius and its vendor specific properties on both the border box and the inner box:
<div id="border-box" style="border-radius: 5px;">
<div id="inner-box" style="border-radius: 5px;">
</div>
</div>
A much more efficient way would simply have the inner-box manage its own border:
<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
<!-- Content -->
</div>
CSS-wise, you could just declare a .rounded-border class and apply it to every box that will have rounded borders:
.rounded-borders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
And apply the class to any boxes that will have rounded borders:
<div id="border-box" class="rounded-borders">
<div id="inner-box" class="rounded-borders">
</div>
</div>
For a single box element, you'll still be required to declare the border size in order to be shown:
<style type="text/css">
#inner-box { border: 4px solid blue; }
</style>
<div id="inner-box" class="rounded-borders">
</div>
Another solution is to have matching inner and outer borders combined with border-radius is to "fake" the border using the <spread-radius> value of the box-shadow property. This produces a solid shadow which can easily pass for a regular border.
For instance, to achieve a 4px border and a 4px white border radius, try this:
/* rounded corners */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 0px 4px #fff;
box-shadow: 0px 0px 0px 4px #fff;
If you want to add a "real" drop shadow to the entire container, you can simply chain your shadow statements like so:
/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
Note: Keep in mind here that the order of the statements is the order in which it will be rendered.
The only thing to beware of is that the initial "faux border" will overlap the first X pixels (where X is the width of the border) of any shadow you want beneath it (and combine, if you're using RGBa opacity on it below 100%.)
So it won't work in all situations, but it'll get the majority. I use this pretty frequently when regular borders are not ideal.
Since there is no such thing as inner-border-radius for CSS, the browsers default it to border-radius - border-width. If you don't like that, the typical solution is to create two divs with borders to mimic the inner border radius but this solution brings in more design into the html. It is also a pain if it's a common border template used through out the site.
I managed to figure a way to keep it all in css by producing the inner div using :after and content: "". So for your case it would be:
.template-border {
position: relative;
border-radius: 5px;
background-color: #000;
border: 10px solid #000;
z-index: -2;
}
.template-border:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
background-color: #FFF;
z-index: -1;
}
Most of the solutions on this page are from the web stone ages (before 2013 - i.e. even before IE11).
Since IE11, the way to do this is easy...
Just in case someone is Googling for this answer after 2013 (it's almost 2020 today) and got sent here, here is the most simple, compatible, and easy way to do this, even if you need to support IE11...
(Feel free to change the px values for the look you want, or better yet, use variables and transpile with Stylus or SASS)
Example HTML...
<div class="wrapper">
<div class="content">
your content goes here
</div>
</div>
Example CSS...
.wrapper {
border-radius: 25px;
border: solid 25px blue;
background-color: blue;
}
.content {
border-radius: 10px;
background-color: white;
}
...Presto.
The problem is not the coding of the CSS but the mathematics of a circle.
Essentially your border-inner-radius (I know this property does not exist) is equal to the border-radius - border-width.
Quite simply work out what you want your inner radius to be and then add the width of the border to achieve the desired effect.
border-inner-radius + border-width = border-radius
Based on Leo Wu's idea, here it is my solution:
.my-div
{
background-color: white;
border: solid 20px black;
border-radius: 10px;
box-shadow: 0 0 10px black;
height: 100px;
left: 30px;
position: relative;
top: 20px;
width: 200px;
}
.my-div:before
{
background-color: white;
border-radius: 5px;
content: "";
display: block;
height: calc(100% + 20px);
left: -10px;
position: absolute;
top: -10px;
width: calc(100% + 20px);
z-index: 1;
}
.some-content
{
height: calc(100% + 20px);
left: -10px;
position: relative;
top: -10px;
width: calc(100% + 20px);
z-index: 3;
}
.some-header
{
background-color: green;
border-radius: 5px 5px 0 0;
height: 30px;
}
<html>
<body>
<div class="my-div">
<div class="some-content">
<div class="some-header">my title</div>
<div>some other content</div>
</div>
</div>
</body>
</html>
You need to have two div elements, one inside the other, and use a cross browser rounded corner css, like this:
.small-rounded {
border: 1px solid ##000;
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}
Today I run into this "problem". My solution uses two divs and overlaps the inner div on the outer one.
A good thing about my solution is that it does not alter the background color (it can be transparent).
You can control the outer border radius by modifying the outer-border class and the inner border with the inner-border class.
.outer-border {
border: 10px solid #20b2aa;
border-radius: 5px;
display: flex;
flex-direction: column;
min-height: 100px;
}
.inner-border, .inner-border-evidence {
flex: 1;
border: 10px solid #20b2aa;
border-radius: 30px;
margin: -9px;
}
.inner-border-evidence {
border-color: #0a3b8a;
}
<div class="outer-border">
<div class="inner-border">
</div>
</div>
<br />
<p>Here you can see how the inner div overlaps the outer div.</p>
<div class="outer-border">
<div class="inner-border-evidence">
</div>
</div>
Another idea is to consider multiple radial-gradient to simulate the inner radius and you can control the outer and inner radius like you want without the need of any extra element:
.box {
width:150px;
height:150px;
margin:10px;
border:10px solid red;
border-radius:10px; /* Outer Radius*/
background:
radial-gradient(farthest-side at bottom right,#0000 98%,red) top left,
radial-gradient(farthest-side at top right,#0000 98%,red) bottom left,
radial-gradient(farthest-side at bottom left ,#0000 98%,red) top right,
radial-gradient(farthest-side at top left ,#0000 98%,red) bottom right,
blue;
background-size:25px 25px; /* inner Radius*/
background-repeat:no-repeat;
background-origin:padding-box;
}
<div class="box">
</div>
You can also have different values for each side:
.box {
width:150px;
height:150px;
margin:10px;
border:10px solid red;
border-radius:10px; /* Outer Radius*/
background:
radial-gradient(farthest-side at bottom right,#0000 98%,red) top left / 30px 30px,
radial-gradient(farthest-side at top right,#0000 98%,red) bottom left / 20px 20px,
radial-gradient(farthest-side at bottom left ,#0000 98%,red) top right / 50px 50px,
radial-gradient(farthest-side at top left ,#0000 98%,red) bottom right/ 10px 10px,
blue;
background-repeat:no-repeat;
background-origin:padding-box;
}
<div class="box">
</div>
You need to make the border-radius to a value greater than the border-width until you start to see a curve. It's not a set formula to set the border-radius of +1px greater than border-width. However, it's going to be a positive value, definitely. You need to experiment in the different browsers where you need this until you see the smallest possible border-radius value that works good enough for you in most browsers. (Some browsers may not support this.) For instance, in Google Chrome, I set a border-width to 10px, but had to set the border-radius to 13px before I started to see a semblance of an inner border curve, while 15px worked even better.
The best and fastest way is to do this
.curve {
width : 300px;
height: 100px;
border: 4px solid black;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
<div class='curve'></div>
If you can't add an extra div you can accomplish this with a background images in each corner.
#nice-corners {
border: 5px solid green;
border-radius: 5px;
background-image: url(top-left.svg), url(top-right.svg), url(bottom-left.svg), url(bottom-right.svg);
background-position: left top, right top, left bottom, right bottom;
background-repeat: no-repeat;
background-size: 16px
}