Related
I am using dotted style border in my box like
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
I want to the increase the space between each dot of the border.
This trick works for both horizontal and vertical borders:
/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;
/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;
You can adjust the size with background-size and the proportion with the linear-gradient percentages. In this example I have a dotted line of 1px dots and 2px spacing.
This way you can have multiple dotted borders too using multiple backgrounds.
Try it in this JSFiddle or take a look at the code snippet example:
div {
padding: 10px 50px;
}
.dotted {
border-top: 1px #333 dotted;
}
.dotted-gradient {
background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
background-position: top;
background-size: 3px 1px;
background-repeat: repeat-x;
}
.dotted-spaced {
background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
background-position: top;
background-size: 10px 1px;
background-repeat: repeat-x;
}
.left {
float: left;
padding: 40px 10px;
background-color: #F0F0DA;
}
.left.dotted {
border-left: 1px #333 dotted;
border-top: none;
}
.left.dotted-gradient {
background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
background-position: left;
background-size: 1px 3px;
background-repeat: repeat-y;
}
.left.dotted-spaced {
background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
background-position: left;
background-size: 1px 10px;
background-repeat: repeat-y;
}
<div>no
<br>border</div>
<div class='dotted'>dotted
<br>border</div>
<div class='dotted-gradient'>dotted
<br>with gradient</div>
<div class='dotted-spaced'>dotted
<br>spaced</div>
<div class='left'>no
<br>border</div>
<div class='dotted left'>dotted
<br>border</div>
<div class='dotted-gradient left'>dotted
<br>with gradient</div>
<div class='dotted-spaced left'>dotted
<br>spaced</div>
Here's a trick I've used on a recent project to achieve nearly anything I want with horizontal borders. I use <hr/> each time I need an horizontal border. The basic way to add a border to this hr is something like
hr {border-bottom: 1px dotted #000;}
But if you want to take control of the border and, for example increase, the space between dots, you may try something like this:
hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}
And in the following, you create your border (here's an example with dots)
hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}
This also means that you can add text-shadow to the dots, gradients etc. Anything you want...
Well, it works really great for horizontal borders. If you need vertical ones, you may specify a class for another hr and use the CSS3 rotation property.
You cannot do it with pure CSS - the CSS3 spec even has a specific quote about this:
Note: There is no control over the spacing of the dots and dashes, nor over the length of the dashes. Implementations are encouraged to choose a spacing that makes the corners symmetrical.
You can, however, use either a border-image or a background image that does the trick.
This uses the standard CSS border and a pseudo element+overflow:hidden.
In the example you get three different 2px dashed borders: normal, spaced like a 5px, spaced like a 10px. Is actually 10px with only 10-8=2px visible.
div.two{border:2px dashed #FF0000}
div.five:before {
content: "";
position: absolute;
border: 5px dashed #FF0000;
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
}
div.ten:before {
content: "";
position: absolute;
border: 10px dashed #FF0000;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
}
div.odd:before {left:0;right:0;border-radius:60px}
div {
overflow: hidden;
position: relative;
text-align:center;
padding:10px;
margin-bottom:20px;
}
<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>
Applied to small elements with big rounded corners may make for some fun effects.
So starting with the answer given and applying the fact that CSS3 allows multiple settings - the below code is useful for creating a complete box:
#border {
width: 200px;
height: 100px;
background: yellow;
text-align: center;
line-height: 100px;
background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
background-position: top, right, bottom, left;
background-repeat: repeat-x, repeat-y;
background-size: 10px 1px, 1px 10px;
}
<div id="border">
bordered area
</div>
Its worth noting that the 10px in the background size gives the area that the dash and gap will cover. The 50% of the background tag is how wide the dash actually is. It is therefore possible to have different length dashes on each border side.
Late to the party but I found that neat little tool online.
https://kovart.github.io/dashed-border-generator/
See the MDN docs for the available values for border-style:
none : No border, sets width to 0.
This is the default value.
hidden : Same as 'none', except in terms of
border conflict resolution for table
elements.
dashed : Series of short
dashes or line segments.
dotted :
Series of dots.
double : Two straight
lines that add up to the pixel amount
defined as border-width.
groove :
Carved effect.
inset : Makes the box
appear embedded.
outset : Opposite of
'inset'. Makes the box appear 3D
(embossed).
ridge : Opposite of
'groove'. The border appears 3D
(coming out).
solid : Single,
straight, solid line.
Apart from those choices, there is no way to influence the standard border's style.
If the possibilities there are not to your liking, you could use CSS3's border-image but note that browser support for this is still very spotty (EDIT: browser support is good as of 2020).
This is an old, but still very relevant topic. The current top answer works well, but only for very small dots. As Bhojendra Rauniyar already pointed out in the comments, for larger (>2px) dots, the dots appear square, not round. I found this page searching for spaced dots, not spaced squares (or even dashes, as some answers here use).
Building on this, I used radial-gradient. Also, using the answer from Ukuser32, the dot-properties can easily be repeated for all four borders. Only the corners are not perfect.
div {
padding: 1em;
background-image:
radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
background-position: top, right, bottom, left;
background-size: 15px 5px, 5px 15px;
background-repeat: repeat-x, repeat-y;
}
<div>Some content with round, spaced dots as border</div>
The radial-gradient expects:
the shape and optional position
two or more stops: a color and radius
Here, I wanted a 5 pixel diameter (2.5px radius) dot, with 2 times the diameter (10px) between the dots, adding up to 15px. The background-size should match these.
The two stops are defined such that the dot is nice and smooth: solid black for half the radius and than a gradient to the full radius.
Building 4 edges solution basing on #Eagorajose's answer with shorthand syntax:
background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
#page {
background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
width: 100px;
height: 100px;
}
<div id="page"></div>
This is a really old question but it has a high ranking in Google so I'm going to throw in my method which could work depending on your needs.
In my case, I wanted a thick dashed border that had a minimal break in between dashes. I used a CSS pattern generator (like this one: http://www.patternify.com/) to create a 10px wide by 1px tall pattern. 9px of that is solid dash color, 1px is white.
In my CSS, I included that pattern as the background image, and then scaled it up by using the background-size attribute. I ended up with a 20px by 2px repeated dash, 18px of that being solid line and 2px white. You could scale it up even more for a really thick dashed line.
The nice thing is since the image is encoded as data you don't have the additional outside HTTP request, so there's no performance burden. I stored my image as a SASS variable so I could reuse it in my site.
So many people are say "You can't". Yes you can. It's true that there is not a css rule to control the gutter space between the dashes but css has other abilities. Don't be so quick to say that a thing can not be done.
.hr {
border-top: 5px dashed #CFCBCC;
margin: 30px 0;
position: relative;
}
.hr:before {
background-color: #FFFFFF;
content: "";
height: 10px;
position: absolute;
top: -2px;
width: 100%;
}
.hr:after {
background-color: #FFFFFF;
content: "";
height: 10px;
position: absolute;
top: -13px;
width: 100%;
}
Basically the border-top height (5px in this case) is the rule that determines the gutter "width". OIf course you would need to adjust the colors to match your needs. This also is a small example for a horizontal line, use left and right to make the vertical line.
In my case I needed curved corners and thin border so I came up with this solution:
/* For showing dependencies between attributes */
:root {
--border-width: 1px;
--border-radius: 4px;
--bg-color: #fff;
}
/* Required: */
.dropzone {
position: relative;
border: var(--border-width) solid transparent;
border-radius: var(--border-radius);
background-clip: padding-box;
background-color: var(--bg-color);
}
.dropzone::before {
content: '';
position: absolute;
top: calc(var(--border-width) * -1); /* or without variables: 'top: -1px;' */
right: calc(var(--border-width) * -1);
bottom: calc(var(--border-width) * -1);
left: calc(var(--border-width) * -1);
z-index: -1;
background-image: repeating-linear-gradient(135deg, transparent 0 8px, var(--bg-color) 8px 16px);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, 0.38);
}
/* Optional: */
html {
background-color: #fafafb;
display: flex;
justify-content: center;
}
.dropzone {
box-sizing: border-box;
height: 168px;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.dropzone::before {
transition: background-color 0.2s ease-in-out;
}
.dropzone:hover::before {
background-color: rgba(0, 0, 0, 0.87);
}
<div class='dropzone'>
Drag 'n' drop some files here, or click to select files
</div>
The idea is to put svg pattern behind element and display only thin line of this pattern as element border.
Short answer: You can't.
You will have to use border-image property and a few images.
IF you're only targeting modern browsers, AND you can have your border on a separate element from your content, then you can use the CSS scale transform to get a larger dot or dash:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
It takes a lot of positional tweaking to get it to line up, but it works. By changing the thickness of the border, the starting size and the scale factor, you can get to just about thickness-length ratio you want. Only thing you can't touch is dash-to-gap ratio.
<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;"> </div>
this is what I did - use an image
enter image description here
I made a javascript function to create dots with an svg. You can adjust dot spacing and size in the javascript code.
var make_dotted_borders = function() {
// EDIT THESE SETTINGS:
var spacing = 8;
var dot_width = 2;
var dot_height = 2;
//---------------------
var dotteds = document.getElementsByClassName("dotted");
for (var i = 0; i < dotteds.length; i++) {
var width = dotteds[i].clientWidth + 1.5;
var height = dotteds[i].clientHeight;
var horizontal_count = Math.floor(width / spacing);
var h_spacing_percent = 100 / horizontal_count;
var h_subtraction_percent = ((dot_width / 2) / width) * 100;
var vertical_count = Math.floor(height / spacing);
var v_spacing_percent = 100 / vertical_count;
var v_subtraction_percent = ((dot_height / 2) / height) * 100;
var dot_container = document.createElement("div");
dot_container.classList.add("dot_container");
dot_container.style.display = getComputedStyle(dotteds[i], null).display;
var clone = dotteds[i].cloneNode(true);
dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
dot_container.appendChild(clone);
for (var x = 0; x < horizontal_count; x++) {
// The Top Dots
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
dot.style.left = left_percent + "%";
dot.style.top = (-dot_height / 2) + "px";
dot_container.appendChild(dot);
// The Bottom Dots
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
dot.style.top = height - (dot_height / 2) + "px";
dot_container.appendChild(dot);
}
for (var y = 1; y < vertical_count; y++) {
// The Left Dots:
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = (-dot_width / 2) + "px";
dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
dot_container.appendChild(dot);
}
for (var y = 0; y < vertical_count + 1; y++) {
// The Right Dots:
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = width - (dot_width / 2) + "px";
if (y < vertical_count) {
dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
}
else {
dot.style.top = height - (dot_height / 2) + "px";
}
dot_container.appendChild(dot);
}
}
}
make_dotted_borders();
div.dotted {
display: inline-block;
padding: 0.5em;
}
div.dot_container {
position: relative;
margin-left: 0.25em;
margin-right: 0.25em;
}
div.dot {
position: absolute;
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}
<div class="dotted">Lorem Ipsum</div>
You could create a canvas (via javascript) and draw a dotted line within. Within the canvas you can control how long the dash and the space in between shall be.
We needed to have circles and this is how we solved it :)
More or less this is done to the element where the styled "border" is needed:
:before {
position: absolute;
width: 100%;
height: 10px;
top:0;
left: 0;
transform: translateY(-50%);
content: '';
background: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 18 10' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='5' cy='5' r='5' fill='%23f7f7f7'/%3e%3c/svg%3e");
}
Demo: https://codepen.io/arnoldsv/pen/PoWYxbg
Here's a solution using CSS only with the use of a clip-path to mask the excess border. Unlike the most voted answer this allows for transparent backgrounds. You can also use get rounded borders by matching the clip-path round property to the border-radius.
.demo {
display: inline-flex;
width: 200px;
height: 100px;
position: relative;
clip-path: inset(0 round 30px 0 30px 0);
}
.demo::before {
content: '';
position: absolute;
left: -7px;
top: -7px;
right: -7px;
bottom: -7px;
border: 8px dashed rgba(0, 0, 255, 0.3);
border-radius: 37px 0 37px 0;
box-sizing: border-box;
}
<div class="demo"></div>
Here's a sass mixin for those interested
=dashed-border($size: 5px, $thickness: 1px, $color: black, $round: 0px)
$corners: ''
#for $i from 1 through length($round)
$value: nth($round, $i)
#if $value != 0
$corners: unquote($corners + calc(#{$value} - #{$size}) + ' ')
#else
$corners: unquote($corners + #{$value} + ' ')
clip-path: inset(0 round $corners)
&::before
content: ''
position: absolute
left: - $size + $thickness
top: - $size + $thickness
right: - $size + $thickness
bottom: - $size + $thickness
border: $size dashed $color
border-radius: $round
box-sizing: border-box
AFAIK there isn't a way to do this. You could use a dashed border or perhaps increase the width of the border a bit, but just getting more spaced out dots is impossible with CSS.
How to make this shape in html?
In need to code it in table and put text labels inside.
use transform in your css.
following code will help you.
<div id="parallelogram"></div>
<style>
#parallelogram {
width: 200px;
height: 20px;
-webkit-transform: skew(149deg);
-moz-transform: skew(149deg);
-o-transform: skew(149deg);
background: #005999;
}
</style>
background gradients works too, then no need to deal with transform as well for content.
/* 2 gradients side by side */
p, div {
color:lightgray;
padding:0.25em 2em;
background:
linear-gradient(135deg,transparent 1.5em, #00367C 1.25em, #00367C 55%, transparent 55%),
linear-gradient(-45deg,transparent 1.5em, #00367C 1.25em, #00367C 55%, transparent 55%);
}
/* or a single gradient sized with calc() */
div {
background:
linear-gradient(135deg,
transparent 1.5em,
#a0367C 1.25em,
#a0367C calc(100% - 1.5em) ,
transparent calc(100% - 1.5em)
)
;
}
label {
color:white;
}
<p><label>label</label> or some text or <input value="input" />or whatever on a single line</p>
<div><label>label</label> or some text or <input value="input" />or whatever on a single line</div>
I have following CSS class :
.acceptRejectAll a, .acceptRejectAll a:visited{
background-image: url("../images/view-patient.png");
background-position: left top;
background-repeat: no-repeat;
color: #4B555C;
float: left;
height: 35px;
padding-top: 12px;
text-align: center;
text-decoration: none;
width: 100px;
}
and following HTML :
<div style="float: none; display: inline-table" class="acceptRejectAll">
<a style="display:inline-block;height:25px;" href="#" class="fontBlack" id="ctl00_ContentPlaceHolder1_btnAcceptAll">Accept All</a>
</div>
this is display as follows :
when i decrease the size of in css class like : width : 85px
it displays as follows :
it cuts image from right side:
i tried to set background-Position in css class : but either left side or right side, image is not display correctly
wht is solution ?
Thanks
You will need to use background-size for this. Example:
background-size: 100% 100%;
Please note that this setting can scale your image to fill parent.
As the image is 100px (at least the visible part is about 92px so I guess the size is 100px) if you change the size of the button you need to scale the background image rather than change the position.
background-size:85px 35px;
Gradient and Border radius
Another way to approach this — considering the kind of button style you are using — is to go the gradient and border radius route. Whilst the code to use a css gradient looks rather messy, it is dynamically generated so you wont end up with stretched curved corners like you will using background-size.
Everything used below is pretty well supported now by most browsers. For anything that doesn't support the gradient you will get a solid blue background with curved corners instead, and it almost isn't worth worrying about non-support for border radius any more.
markup:
<div class="acceptRejectAll">
Accept All
</div>
css:
.acceptRejectAll {
display: inline-table;
border-radius: 20px;
text-align: center;
padding: 10px;
width: 100px; /* You can change the width as you like */
background: #c3e5fe; /* Old browsers */
background: -moz-linear-gradient(top, #c3e5fe 0%, #98d1fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3e5fe), color-stop(100%,#98d1fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* IE10+ */
background: linear-gradient(to bottom, #c3e5fe 0%,#98d1fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3e5fe', endColorstr='#98d1fd',GradientType=0 );
}
.fontBlack {
font-family: sans-serif;
font-size: 10pt;
color: black;
text-decoration: none;
}
The gradient was generated using:
http://www.colorzilla.com/gradient-editor/#c3e5fe+0,98d1fd+100;Custom
You end up with:
http://jsfiddle.net/NDHtn/
Or as a preview:
When you must use an image
If there is no other choice but to use an image as a background for a button — say, the graphics are too complicated to replicate using css effects — rather than use one image stretched and distorted to fit, you can use something like the following. There are many ways to essentially achieve the same result, I prefer to keep my mark-up simple and my css more complicated (rather than the other way around). However, to make things more supportive of the wider browser community you can break your mark-up into three parts, rather than make use of ::before and ::after:
markup:
<a class="button" href="#">
<span>Round Button with lots of text and then some</span>
</a>
css:
.button:before {
position: absolute;
content: '';
background: url('image.png') left top;
top: 0;
left: -50px;
width: 50px;
height: 99px;
}
.button:after {
position: absolute;
content: '';
background: url('image.png') right top;
top: 0;
right: -50px;
width: 50px;
height: 99px;
}
.button {
background: url('image.png') center -99px;
height: 99px;
margin: 0 50px;
position: relative;
display: inline-block;
color: white;
text-decoration: none;
}
.button span { display: block; padding: 35px 0px; }
image.png, hacked together using this original image and pixlr.com:
Which will give:
http://jsfiddle.net/2K5Kg/1/
Example mark-up without use of psuedo elements:
<a class="button" href="#">
<span class="before"></span>
<span class="after"></span>
<span>Round Button with lots of text and then some</span>
</a>
Then in the css just replace the .button:before with .button .before and the same for :after.
I am using dotted style border in my box like
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
I want to the increase the space between each dot of the border.
This trick works for both horizontal and vertical borders:
/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;
/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;
You can adjust the size with background-size and the proportion with the linear-gradient percentages. In this example I have a dotted line of 1px dots and 2px spacing.
This way you can have multiple dotted borders too using multiple backgrounds.
Try it in this JSFiddle or take a look at the code snippet example:
div {
padding: 10px 50px;
}
.dotted {
border-top: 1px #333 dotted;
}
.dotted-gradient {
background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
background-position: top;
background-size: 3px 1px;
background-repeat: repeat-x;
}
.dotted-spaced {
background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
background-position: top;
background-size: 10px 1px;
background-repeat: repeat-x;
}
.left {
float: left;
padding: 40px 10px;
background-color: #F0F0DA;
}
.left.dotted {
border-left: 1px #333 dotted;
border-top: none;
}
.left.dotted-gradient {
background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
background-position: left;
background-size: 1px 3px;
background-repeat: repeat-y;
}
.left.dotted-spaced {
background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
background-position: left;
background-size: 1px 10px;
background-repeat: repeat-y;
}
<div>no
<br>border</div>
<div class='dotted'>dotted
<br>border</div>
<div class='dotted-gradient'>dotted
<br>with gradient</div>
<div class='dotted-spaced'>dotted
<br>spaced</div>
<div class='left'>no
<br>border</div>
<div class='dotted left'>dotted
<br>border</div>
<div class='dotted-gradient left'>dotted
<br>with gradient</div>
<div class='dotted-spaced left'>dotted
<br>spaced</div>
Here's a trick I've used on a recent project to achieve nearly anything I want with horizontal borders. I use <hr/> each time I need an horizontal border. The basic way to add a border to this hr is something like
hr {border-bottom: 1px dotted #000;}
But if you want to take control of the border and, for example increase, the space between dots, you may try something like this:
hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}
And in the following, you create your border (here's an example with dots)
hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}
This also means that you can add text-shadow to the dots, gradients etc. Anything you want...
Well, it works really great for horizontal borders. If you need vertical ones, you may specify a class for another hr and use the CSS3 rotation property.
You cannot do it with pure CSS - the CSS3 spec even has a specific quote about this:
Note: There is no control over the spacing of the dots and dashes, nor over the length of the dashes. Implementations are encouraged to choose a spacing that makes the corners symmetrical.
You can, however, use either a border-image or a background image that does the trick.
This uses the standard CSS border and a pseudo element+overflow:hidden.
In the example you get three different 2px dashed borders: normal, spaced like a 5px, spaced like a 10px. Is actually 10px with only 10-8=2px visible.
div.two{border:2px dashed #FF0000}
div.five:before {
content: "";
position: absolute;
border: 5px dashed #FF0000;
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
}
div.ten:before {
content: "";
position: absolute;
border: 10px dashed #FF0000;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
}
div.odd:before {left:0;right:0;border-radius:60px}
div {
overflow: hidden;
position: relative;
text-align:center;
padding:10px;
margin-bottom:20px;
}
<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>
Applied to small elements with big rounded corners may make for some fun effects.
So starting with the answer given and applying the fact that CSS3 allows multiple settings - the below code is useful for creating a complete box:
#border {
width: 200px;
height: 100px;
background: yellow;
text-align: center;
line-height: 100px;
background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
background-position: top, right, bottom, left;
background-repeat: repeat-x, repeat-y;
background-size: 10px 1px, 1px 10px;
}
<div id="border">
bordered area
</div>
Its worth noting that the 10px in the background size gives the area that the dash and gap will cover. The 50% of the background tag is how wide the dash actually is. It is therefore possible to have different length dashes on each border side.
Late to the party but I found that neat little tool online.
https://kovart.github.io/dashed-border-generator/
See the MDN docs for the available values for border-style:
none : No border, sets width to 0.
This is the default value.
hidden : Same as 'none', except in terms of
border conflict resolution for table
elements.
dashed : Series of short
dashes or line segments.
dotted :
Series of dots.
double : Two straight
lines that add up to the pixel amount
defined as border-width.
groove :
Carved effect.
inset : Makes the box
appear embedded.
outset : Opposite of
'inset'. Makes the box appear 3D
(embossed).
ridge : Opposite of
'groove'. The border appears 3D
(coming out).
solid : Single,
straight, solid line.
Apart from those choices, there is no way to influence the standard border's style.
If the possibilities there are not to your liking, you could use CSS3's border-image but note that browser support for this is still very spotty (EDIT: browser support is good as of 2020).
This is an old, but still very relevant topic. The current top answer works well, but only for very small dots. As Bhojendra Rauniyar already pointed out in the comments, for larger (>2px) dots, the dots appear square, not round. I found this page searching for spaced dots, not spaced squares (or even dashes, as some answers here use).
Building on this, I used radial-gradient. Also, using the answer from Ukuser32, the dot-properties can easily be repeated for all four borders. Only the corners are not perfect.
div {
padding: 1em;
background-image:
radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
background-position: top, right, bottom, left;
background-size: 15px 5px, 5px 15px;
background-repeat: repeat-x, repeat-y;
}
<div>Some content with round, spaced dots as border</div>
The radial-gradient expects:
the shape and optional position
two or more stops: a color and radius
Here, I wanted a 5 pixel diameter (2.5px radius) dot, with 2 times the diameter (10px) between the dots, adding up to 15px. The background-size should match these.
The two stops are defined such that the dot is nice and smooth: solid black for half the radius and than a gradient to the full radius.
Building 4 edges solution basing on #Eagorajose's answer with shorthand syntax:
background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
#page {
background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
width: 100px;
height: 100px;
}
<div id="page"></div>
This is a really old question but it has a high ranking in Google so I'm going to throw in my method which could work depending on your needs.
In my case, I wanted a thick dashed border that had a minimal break in between dashes. I used a CSS pattern generator (like this one: http://www.patternify.com/) to create a 10px wide by 1px tall pattern. 9px of that is solid dash color, 1px is white.
In my CSS, I included that pattern as the background image, and then scaled it up by using the background-size attribute. I ended up with a 20px by 2px repeated dash, 18px of that being solid line and 2px white. You could scale it up even more for a really thick dashed line.
The nice thing is since the image is encoded as data you don't have the additional outside HTTP request, so there's no performance burden. I stored my image as a SASS variable so I could reuse it in my site.
So many people are say "You can't". Yes you can. It's true that there is not a css rule to control the gutter space between the dashes but css has other abilities. Don't be so quick to say that a thing can not be done.
.hr {
border-top: 5px dashed #CFCBCC;
margin: 30px 0;
position: relative;
}
.hr:before {
background-color: #FFFFFF;
content: "";
height: 10px;
position: absolute;
top: -2px;
width: 100%;
}
.hr:after {
background-color: #FFFFFF;
content: "";
height: 10px;
position: absolute;
top: -13px;
width: 100%;
}
Basically the border-top height (5px in this case) is the rule that determines the gutter "width". OIf course you would need to adjust the colors to match your needs. This also is a small example for a horizontal line, use left and right to make the vertical line.
In my case I needed curved corners and thin border so I came up with this solution:
/* For showing dependencies between attributes */
:root {
--border-width: 1px;
--border-radius: 4px;
--bg-color: #fff;
}
/* Required: */
.dropzone {
position: relative;
border: var(--border-width) solid transparent;
border-radius: var(--border-radius);
background-clip: padding-box;
background-color: var(--bg-color);
}
.dropzone::before {
content: '';
position: absolute;
top: calc(var(--border-width) * -1); /* or without variables: 'top: -1px;' */
right: calc(var(--border-width) * -1);
bottom: calc(var(--border-width) * -1);
left: calc(var(--border-width) * -1);
z-index: -1;
background-image: repeating-linear-gradient(135deg, transparent 0 8px, var(--bg-color) 8px 16px);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, 0.38);
}
/* Optional: */
html {
background-color: #fafafb;
display: flex;
justify-content: center;
}
.dropzone {
box-sizing: border-box;
height: 168px;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.dropzone::before {
transition: background-color 0.2s ease-in-out;
}
.dropzone:hover::before {
background-color: rgba(0, 0, 0, 0.87);
}
<div class='dropzone'>
Drag 'n' drop some files here, or click to select files
</div>
The idea is to put svg pattern behind element and display only thin line of this pattern as element border.
Short answer: You can't.
You will have to use border-image property and a few images.
IF you're only targeting modern browsers, AND you can have your border on a separate element from your content, then you can use the CSS scale transform to get a larger dot or dash:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
It takes a lot of positional tweaking to get it to line up, but it works. By changing the thickness of the border, the starting size and the scale factor, you can get to just about thickness-length ratio you want. Only thing you can't touch is dash-to-gap ratio.
<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;"> </div>
this is what I did - use an image
enter image description here
I made a javascript function to create dots with an svg. You can adjust dot spacing and size in the javascript code.
var make_dotted_borders = function() {
// EDIT THESE SETTINGS:
var spacing = 8;
var dot_width = 2;
var dot_height = 2;
//---------------------
var dotteds = document.getElementsByClassName("dotted");
for (var i = 0; i < dotteds.length; i++) {
var width = dotteds[i].clientWidth + 1.5;
var height = dotteds[i].clientHeight;
var horizontal_count = Math.floor(width / spacing);
var h_spacing_percent = 100 / horizontal_count;
var h_subtraction_percent = ((dot_width / 2) / width) * 100;
var vertical_count = Math.floor(height / spacing);
var v_spacing_percent = 100 / vertical_count;
var v_subtraction_percent = ((dot_height / 2) / height) * 100;
var dot_container = document.createElement("div");
dot_container.classList.add("dot_container");
dot_container.style.display = getComputedStyle(dotteds[i], null).display;
var clone = dotteds[i].cloneNode(true);
dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
dot_container.appendChild(clone);
for (var x = 0; x < horizontal_count; x++) {
// The Top Dots
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
dot.style.left = left_percent + "%";
dot.style.top = (-dot_height / 2) + "px";
dot_container.appendChild(dot);
// The Bottom Dots
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
dot.style.top = height - (dot_height / 2) + "px";
dot_container.appendChild(dot);
}
for (var y = 1; y < vertical_count; y++) {
// The Left Dots:
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = (-dot_width / 2) + "px";
dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
dot_container.appendChild(dot);
}
for (var y = 0; y < vertical_count + 1; y++) {
// The Right Dots:
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = width - (dot_width / 2) + "px";
if (y < vertical_count) {
dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
}
else {
dot.style.top = height - (dot_height / 2) + "px";
}
dot_container.appendChild(dot);
}
}
}
make_dotted_borders();
div.dotted {
display: inline-block;
padding: 0.5em;
}
div.dot_container {
position: relative;
margin-left: 0.25em;
margin-right: 0.25em;
}
div.dot {
position: absolute;
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}
<div class="dotted">Lorem Ipsum</div>
You could create a canvas (via javascript) and draw a dotted line within. Within the canvas you can control how long the dash and the space in between shall be.
We needed to have circles and this is how we solved it :)
More or less this is done to the element where the styled "border" is needed:
:before {
position: absolute;
width: 100%;
height: 10px;
top:0;
left: 0;
transform: translateY(-50%);
content: '';
background: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 18 10' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='5' cy='5' r='5' fill='%23f7f7f7'/%3e%3c/svg%3e");
}
Demo: https://codepen.io/arnoldsv/pen/PoWYxbg
Here's a solution using CSS only with the use of a clip-path to mask the excess border. Unlike the most voted answer this allows for transparent backgrounds. You can also use get rounded borders by matching the clip-path round property to the border-radius.
.demo {
display: inline-flex;
width: 200px;
height: 100px;
position: relative;
clip-path: inset(0 round 30px 0 30px 0);
}
.demo::before {
content: '';
position: absolute;
left: -7px;
top: -7px;
right: -7px;
bottom: -7px;
border: 8px dashed rgba(0, 0, 255, 0.3);
border-radius: 37px 0 37px 0;
box-sizing: border-box;
}
<div class="demo"></div>
Here's a sass mixin for those interested
=dashed-border($size: 5px, $thickness: 1px, $color: black, $round: 0px)
$corners: ''
#for $i from 1 through length($round)
$value: nth($round, $i)
#if $value != 0
$corners: unquote($corners + calc(#{$value} - #{$size}) + ' ')
#else
$corners: unquote($corners + #{$value} + ' ')
clip-path: inset(0 round $corners)
&::before
content: ''
position: absolute
left: - $size + $thickness
top: - $size + $thickness
right: - $size + $thickness
bottom: - $size + $thickness
border: $size dashed $color
border-radius: $round
box-sizing: border-box
AFAIK there isn't a way to do this. You could use a dashed border or perhaps increase the width of the border a bit, but just getting more spaced out dots is impossible with CSS.
I'm wondering if there's an easier way to create circular divs than what I'm doing now.
Currently, I am just making an image for each different size, but it's annoying to do this.
Is there anyway using CSS to make divs which are circular and I can specify the radius?
Here's a demo: http://jsfiddle.net/thirtydot/JJytE/1170/
CSS:
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
}
.type3 {
width: 500px;
height: 500px;
background: aqua;
border: 30px solid blue;
}
HTML:
<div class="circleBase type1"></div>
<div class="circleBase type2"></div><div class="circleBase type2"></div>
<div class="circleBase type3"></div>
To make this work in IE8 and older, you must download and use CSS3 PIE. My demo above won't work in IE8, but that's only because jsFiddle doesn't host PIE.htc.
My demo looks like this:
Setting the border-radius of each side of an element to 50% will create the circle display at any size:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
Try this
.iphonebadge {
border-radius:99px;
-moz-border-radius:99px;
-webkit-border-radius:99px;
background:red;
color:#fff;
border:3px #fff solid;
background-color: #e7676d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
background-image: linear-gradient(top, #e7676d, #b7070a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a');
-webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
-moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
display:inline-block;
padding:2px 2px 2px 2px ;
margin:3px;
font-family:arial;
font-weight:bold;
}
It is actually possible.
See: CSS Tip: How to Make Circles Without Images. See demo.
But be warned, It has serious disadvantages in terms of compatibility basically, you are making a cat bark.
See it working here
As you will see you just have to set up the height and width to half the border-radius
Good luck!
I have 4 solution to finish this task:
border-radius
clip-path
pseudo elements
radial-gradient
#circle1 {
background-color: #B90136;
width: 100px;
height: 100px;
border-radius: 50px;/* specify the radius */
}
#circle2 {
background-color: #B90136;
width: 100px;/* specify the radius */
height: 100px;/* specify the radius */
clip-path: circle();
}
#circle3::before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50px;/* specify the radius */
background-color: #B90136;
}
#circle4 {
background-image: radial-gradient(#B90136 70%, transparent 30%);
height: 100px;/* specify the radius */
width: 100px;/* specify the radius */
}
<h3>1 border-radius</h3>
<div id="circle1"></div>
<hr/>
<h3>2 clip-path</h3>
<div id="circle2"></div>
<hr/>
<h3>3 pseudo element</h3>
<div id="circle3"></div>
<hr/>
<h3>4 radial-gradient</h3>
<div id="circle4"></div>
Let's say you have this image:
to make a circle out of this you only need to add
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
}
So if you have a div you can do the same thing.
Check the example below:
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
animation: stackoverflow-example infinite 20s linear;
pointer-events: none;
}
#keyframes stackoverflow-example {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div>
<img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>
There's also [the bad idea of] using several (20+) horizontal or vertical 1px divs to construct a circle. This jQuery plugin uses this method to construct different shapes.
Give width and height depending on the size but,keep both equal
.circle {
background-color: gray;
height: 400px;
width: 400px;
border-radius: 100%;
}
<div class="circle">
</div>
.fa-circle{
color: tomato;
}
div{
font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
Just wanted to mention another solution which answers the question of "Easier way to create circle div than using an image?" which is to use FontAwesome.
You import the fontawesome css file or from the CDN here
and then you just:
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
and you can give it any color you want any font size.
You can try the radial-gradient CSS function:
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
Apply it to a div layer:
<div class="circle"></div>
.circle {
height: 20rem;
width: 20rem;
border-radius: 50%;
background-color: #EF6A6A;
}
<div class="circle"></div>
You can use radius but it will not work on IE: border-radius: 5px 5px;.
basically this uses div's position absolute to place a character at the given coordinates. so using the parametric equation for a circle, you can draw a circle. if you were to change div's position to relative, it'll result in a sine wave...
in essence we are graphing equations by abusing the position property. i'm not versed well in css, so someone can surely make this more elegant. enjoy.
this works on all browsers and mobile devices (that i'm aware of). i use it on my own website to draw sine waves of text (www.cpixel.com). the original source of this code is found here: www.mathopenref.com/coordcirclealgorithm.html
<html>
<head></head>
<body>
<script language="Javascript">
var x_center = 50; //0 in both x_center and y_center will place the center
var y_center = 50; // at the top left of the browser
var resolution_step = 360; //how many times to stop along the circle to plot your character.
var radius = 50; //how big ya want your circle?
var plot_character = "·"; //could use any character here, try letters/words for cool effects
var div_top_offset=10;
var div_left_offset=10;
var x,y;
for ( var angle_theta = 0; angle_theta < 2 * Math.PI; angle_theta += 2 * Math.PI/resolution_step ){
x = x_center + radius * Math.cos(angle_theta);
y = y_center - radius * Math.sin(angle_theta);
document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
}
</script>
</body>
</html>
Adding the css property of:
border-radius: 50%;
to any div makes it circular.
For circle, create a div element and then enter width = 2 times of the border radius = 2 times padding. Also line-height = 0
For example, with 50px as radii of the circle, the below code works well:
width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;