How to increase space between dotted border dots - html

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.

Related

How do i make a div continue linear gradient of its' grandparent? [duplicate]

This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 13 days ago.
body {
margin: 0;
padding: 0;
background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
}
.border {
padding: 10px;
border-radius: 20px;
background-image: linear-gradient(25deg, #2a5470 25%, #4c4177 100%);
}
.clock {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%); //How do i make it continue gradient of body?
border-radius: 20px;
}
<body>
<div class="border">
<div class="clock">
<h2>Break/Session</h2>
<div>25:00</div>
</div>
</div>
</body>
Here's how it looks now
In order to make the border have gradient, i found out that i need to make separate div with background as this gradient and then adjust padding.
What i want to achieve is to make .clock background continue gradient of the body, just like it would without having .border around it.
Just take the gradient property outside and add the class names generally as listed below,
body {
margin: 0;
padding: 0;
background-repeat: no-repeat;
min-height: 100vh;
}
body,.clock {
background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
}
.border {
padding: 10px;
border-radius: 20px;
background-image: linear-gradient(25deg, #2a5470 25%, #4c4177 100%);
max-width: 200px;
margin: 50px auto 0;
}
.clock {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
}
h2, .clock div {
color: #fff;
}
.clock div {
font-size: 50px;
}
<body>
<div class="border">
<div class="clock">
<h2>Break/Session</h2>
<div>25:00</div>
</div>
</div>
</body>
Here is an idea on how to achieve this. Using nested divs like in your example might not be the easiest solution through, as you'd probably need to overwrite the inner divs background with some js obtained values, as there is no easy way to reset the background like that.
Edit: See this question for a better solution using just CSS: Border Gradient with Border Radius.
Scroll down for a JS solution.
Using css only with border-image
Answer taken from https://css-tricks.com/gradient-borders-in-css/ and adapted.
You can use the border-image css attribute to more easily achieve what you're looking for, if you don't need a border-radius.
I'm just using the wrapper here to increase the viewport of the example.
body {
margin: 0;
padding: 0;
background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
}
.clock {
display: flex;
flex-direction: column;
align-items: center;
border: 15px solid;
border-image-source: linear-gradient(25deg, #2a5470 25%, #4c4177 100%);
border-image-slice: 1;
}
.wrapper {
height: 200px;
}
<body>
<div class="wrapper">
<div class="clock">
<h2>Break/Session</h2>
<div>25:00</div>
</div>
</div>
</body>
Using JS for an actually working solution
The idea here is that you can manually calculate the position of the clock inside the body element and set the background manually. This solution I present below is specifically tailored for this specific background and assumes things like "it will only ever be inside the parent element and never move outside". A more general solution would need to be much more extensive, but I hope it gets my idea across.
// update the background when scrolling
window.addEventListener("scroll", updateBackgroundColor);
const wrapper = document.querySelector("body");
const clock = document.querySelector(".clock");
function updateBackgroundColor(){
const wrapperRect = wrapper.getBoundingClientRect();
const clockRect = clock.getBoundingClientRect();
// in this case we only care about top and bottom, because the gradient is a straight 180°.
// so we get the relative position inside the outer relevant element
const relativePosition = {
top: (clockRect.top - wrapperRect.top) / wrapperRect.height,
bottom: (clockRect.top + clockRect.height - wrapperRect.top) / wrapperRect.height,
}
// since the gradient only starts at 25% down, we need to adjust the calculation to use those relative values instead
const startPercentage = 0.25;
// this math is just a fancy way of saying "(top - 0.25) * (4/3)" because that is what scales the values for us to the desired range.
relativePosition.top = (relativePosition.top - startPercentage) * ((1 / startPercentage) / ((1 - startPercentage) / startPercentage));
relativePosition.bottom = (relativePosition.bottom - startPercentage) * ((1 / startPercentage) / ((1 - startPercentage) / startPercentage));
// if value is negative, set to 0
if(relativePosition.top < 0) relativePosition.top = 0;
if(relativePosition.bottom < 0) relativePosition.bottom = 0;
let newTopColor = getGradientColor({r:42, g:84, b:112} /*#2a5470*/, {r:76, g:65, b:119} /*#4c4177*/, relativePosition.top);
let newBottomColor = getGradientColor({r:42, g:84, b:112} /*#2a5470*/, {r:76, g:65, b:119} /*#4c4177*/, relativePosition.bottom);
clock.style.background = `linear-gradient(180deg, rgb(${newTopColor.r}, ${newTopColor.g}, ${newTopColor.b}) 0%, rgb(${newBottomColor.r}, ${newBottomColor.g}, ${newBottomColor.b}) 100%)`;
}
// returns the linearly interpolated gradient color value between two colors
// colors are represented as {r:, g:, b:} objects for simplicity
function getGradientColor(color1, color2, percentage){
return {
r: color1.r + ((color2.r - color1.r) * percentage),
g: color1.g + ((color2.g - color1.g) * percentage),
b: color1.b + ((color2.b - color1.b) * percentage),
}
}
// run once so it works immediately not just after the first scrolling
updateBackgroundColor();
body {
margin: 0;
padding: 0;
background-repeat: no-repeat;
min-height: 200vh;
}
body, .clock {
background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
}
.border {
padding: 10px;
border-radius: 20px;
background-image: linear-gradient(25deg, #2a5470 25%, #4c4177 100%);
max-width: 200px;
margin: 50px auto 0;
position: sticky;
top: 10px;
}
.clock {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
}
h2, .clock div {
color: #fff;
}
.clock div {
font-size: 50px;
}
<!DOCTYPE html>
<html>
<body>
<div class="border">
<div class="clock">
<h2>Break/Session</h2>
<div>25:00</div>
</div>
</div>
</body>
</html>

BORDER DOTTED-CSS SPACING [duplicate]

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 add an edge highlight to a CSS shape?

Hi I am trying to create a highlight on a CSS shape as shown below.
There will also be content inside of the hexagon including image and text,
The highlight I am referring to is the part in the top left.
the code I currently have for creating the hexagon is:
HTML
<div class="hexagon-big"></div>
CSS
.hexagon-big {
position: relative;
width: 200px;
height: 115.47px;
background-color: #343434;
}
.hexagon-big:before,
.hexagon-big:after {
content: "";
position: absolute;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon-big:before {
bottom: 100%;
border-bottom: 57.74px solid #343434;
}
.hexagon-big:after {
top: 100%;
width: 0;
border-top: 57.74px solid #343434;
}
There is other code for the content but i left it out because I don't think it is necessary
Do the hexagon shape differently and you can rely on gradient to create that highlight effect:
.hex {
width: 200px;
display: inline-flex;
margin:0 5px;
background:
conic-gradient(at top,#000 230deg, #0000 0),
linear-gradient(to bottom left,#fff , #000 60%);
clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}
.hex::before {
content: "";
padding-top: 115%; /* 100%/cos(30) */
}
<div class="hex"></div>
The solution in this answer is heavily based on the previous answer. To use clip-path and stacked gradients is by far the smartest thing to do here, but I still wanted to post this in order to show, how this solution could be improved and adjusted for your use case (text box, coloring, variables for maintenance, etc.).
.hexagon-big {
/* define box and text space */
width: 200px;
height: 230px;
padding: 10.8% 5px; /* adjust text box padding here; mind that top/bottom tip are part of the box */
box-sizing: border-box; /* width/height should include padding */
/* text formatting (optional) */
color: white;
text-align: center;
/* hex shape */
--hex-col: hsl(0deg 0% 20%); /* just your #343434 as a HSL color */
--hex-shadow: hsl(0deg 0% 50%); /* increased lightness by 15% to define highlight root color; 100% would be fully white */
background:
conic-gradient(at top, var(--hex-col) 232deg, transparent 0), /* change the angle of the shadow at "232deg": increase → narrower, decrease → wider */
linear-gradient(to bottom left, var(--hex-shadow), var(--hex-col) 55%);
clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}
<div class="hexagon-big">
Lorem ipsum dolor sit amet...
</div>
It should also be mentioned that your current way of using border is well better supported by older browsers than clip-path and conic-gradient (same with var()).
If this should be a problem, you might have to add another HTML tag and work out a way with transform: matrix(...) and box-shadow: inset ... (for example).

Round borders separated in sections around circular image

I am wondering how it is possible to create the following effect using only CSS:
Desired output :
Currently, all I can think of is adding a border around the image. But how can I cut them and make sections out of them around the image?
This is my current CSS:
.avatar img {
border-radius: 50%;
border: solid 3px #65C178;
border-width: 4px;
}
And HTML:
<div class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" /></div>
Preview: JSFiddle Example
This only gives a border around the avatar image, not the green sections with white spacings.
DEMO
Output :
Explanation
Creating the borders
Use borders with border-radius to create the borders.
step 1
Then transform rotate to make the left top border appear at the right place.Step 2 (don't forget to "unrotate" the image by rotating it the other way so it stays vertical)
The white spaces
Use pseudo elements to create the white spacings at the bottom and the right of the image. step 3
Unless you have very special requirements for browser support, you can remove the vendor prefixes for the border-radius property. Check canIuse for more info.
CSS :
.avatar{
border: solid 4px #54BE69;
border-left-color:#D5EDDA;
padding:2px;
display:inline-block;
border-radius: 50%;
position:relative;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
.avatar img{
display:block;
border-radius: 50%;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
.avatar:before, .avatar:after{
content:'';
position:absolute;
background:#fff;
z-index:-1;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
.avatar:before{
height:4px;
top:50%;
left:2px; right:-5px;
margin-top:-2px;
}
.avatar:after{
width:4px;
left:50%;
top:2px; bottom:-5px;
margin-left:-2px;
}
Here you have an example with sass.. (quickly Googled)
http://codepen.io/geedmo/pen/InFfd
EDIT: As requested in comments here's a little improvement with some quick tweaks to that codepen
SASS DEMO LINK
SASS:
// Colors
$progressColor: #65C178
$pendingProgressColor: #D5EDDA
$backColor: #fff
/* -------------------------------------
* Avatar img
* ------------------------------------- */
.avatar img
border-radius: 50%
border: solid 3px #fff
border-width: 3px
margin-top: 4px
margin-left: 4px
/* -------------------------------------
* Progress Bar
* ------------------------------------- */
.progress-radial
float: left
margin-right: 30px
position: relative
width: 142px
height: 142px
border-radius: 50%
border: 2px solid $backColor // remove gradient color
background-color: $progressColor // default 100%
/* -------------------------------------
* Mixin for progress-% class
* ------------------------------------- */
$step: 5 // step of % for created classes
$loops: round(100 / $step)
$increment: 360 / $loops
$half: round($loops / 2)
#for $i from 0 through $loops
.progress-#{$i*$step}
#if $i < $half
$nextdeg: 90deg + ( $increment * $i )
background-image: linear-gradient(90deg, $pendingProgressColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $progressColor 50%, $pendingProgressColor 50%, $pendingProgressColor)
#else
$nextdeg: -90deg + ( $increment * ( $i - $half ) )
background-image: linear-gradient($nextdeg, $progressColor 50%, transparent 50%, transparent), linear-gradient(270deg, $progressColor 50%, $pendingProgressColor 50%, $pendingProgressColor)
For the separator of the progress sections another mixin could be included
here is a solution: jsfiddle
CSS
.avatar img {
border-radius: 50%;
border-width: 4px;
padding: 4px;
background-image: linear-gradient(-90deg, #65C178 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(0deg, #65C178 50%, rgba(0, 0, 0, 0) 50%);
}
HTML
<div class="avatar">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" />
</div>
Note: change the deg value in the second linear-gradient to change the percentage filled.
We cant get the exact like your image. But something we can get it. Add the following line of code in your css.
border-top-color:#ff00ff;
border-bottom-color:#0000ff;
border-left-color:#00ff00;
border-right-color:#000;
Updated jsfiddle below.
http://jsfiddle.net/vz964/1/

Easier way to create circle div than using an image?

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;