I have a box that has following CSS:
.box{
background-clip: content-box;
background-color: #FFEA27;
border-radius: 4%;
}
And the problem is that border radius is not being calculated correctly because of the background-clip: content-box; since border-radius calculates paddings also. At the end I get results like this: https://prnt.sc/n9gxpv
Let's look at the upper right corner for example. The rounding from right line to edge and from top line to edge is not equal and thus we I don't get perfectly round edge.
Is there any workaround for this. Like setting background color of a div without using background-color. Important this to say is that I cannot switch to margins from paddings and eliminate need for backgroud-clip attribute.
I made this simple workaround to fix it:
I made another div inside the current box and set it's width and height to 100% (so it takes the width and height of original element). Than I just set background color and border radius to inner element. Here is code example.
HTML:
<div class="box">
<div class="innerBox">
</div>
</div>
CSS:
.innerBox{
width: 100%;
height: 100%;
border-radius: 2%;
background-color: #1C1C1C;
}
Instead of using % as the unit, use pixel.
.box{
background-clip: content-box;
background-color: #FFEA27;
border-radius: 4px;
}
Works perfectly.
Related
I wanted to create a simple loading animation with CSS, so I needed a border which was only visible 1/4 around the element. The element also needed to be round. I stumbled upon border-top and created the following CSS, which is applied to the "loading element":
.loading {
width: 5rem;
height: 5rem;
border-radius: 50%;
border-top: 5px solid red
}
<div class="loading"></div>
However, now I've gotten a problem, the border created with border-top surrounds approximately 1/2 of the element and has gotten a weirdly shape.
I've, searched for a solution and found out, that I also need to add a border around the complete element, to make it look, like I want it to look. So, I've added the following CSS: border: 5px solid transparent and achieved the result I wanted. The border takes up 1/4 of the element and has gotten linear ends:
Why does my solution work, why does my first attempt surround the element by a half and why is my first attempt so oddly shaped?
CSS borders meet at an angle, so the shape of their ends is determined by the width of each border. This is how borders are used to create CSS triangles. This article has a good overview of how it works, with a nice visual example near the start: The secret of CSS triangles
Of course, it's easier to see what's going on when the borders are all the same width, and there is no border radius to complicate things. But when you just have a single border with width, and border radius, then you've seen how that affects the meeting point.
I recommend you try creating a square div with 4 different coloured borders, and then experiment with each of their widths, and with border radius, using your browser's developer tools so you can see how the meeting points change.
This is because the border width transitions to what it is on the adjacent sides (zero). Here I demonstrate with a wider border on the side.
.loading {
width: 5rem;
height: 5rem;
border-radius: 50%;
border-top: 5px solid red;
border-right: 25px solid;
}
<div class="loading"></div>
You'd normally create this sort of effect using pseudo-elements or canvas.
.loading {
width: 5rem;
height: 5rem;
border-radius: 50%;
border: 5px solid;
border-color: #ef7d00 #d8d9d9 #d8d9d9 #d8d9d9;
}
<div class="loading"></div>
I can't seem to get a border around a circle in CSS. I've double-checked to make sure the HTML classes were the same in CSS and tried various combinations of CSS properties. For some reason border: 4px solid #a569bd; is filling in the circle instead of becoming a border.
jsfiddle
/* circle icons for legend */
.layer-circle {
width: 8px;
height: 8px;
margin-top: 8px;
margin-left: 5px;
position: absolute;
display: flex;
border-radius: 50%;
}
.allbrew {
background-color: black;
}
.brewhunyrds {
background-color: black;
border: 4px solid #a569bd;
}
<b>Points of Interest</b>
<div class='poi-layer-options'>
<div class="layer-circle allbrew"></div>
<a class="layer-text" id="allbrew"><span>Breweries</span><br></a>
<div class="layer-circle brewhunyrds"></div>
<a class="layer-text" id="brewhunyrds"><span>Trail Breweries (100 yards)</span><br></a>
</div>
The code you posted doesn't correspond to what you describe (the jsfiddle does), but what you describe can happen if box-sizing: border-box; applies to that element (maybe caused by an according CSS rule with a * selector): Since in this case the given width includes the border and a border of 2 x 50% adds up to 100% (i.e. the full width), the border will completely fill the element.
To avoid that, add box-sizing: content-box; to the CSS rules for that element. This will add the border width to the element width / place the border outside the element.
Your fiddle modified accordingly: https://jsfiddle.net/sayxcfrn/
I have an responsive container (Wordpress with visual composer) with a background color and border. If I want the background a little outside the container. (like a offset print error) How to achive this. I have dabbled with background-position. But can't get it to work in WP and dosn't seem to work with negative?
Background and border offset
You could replace border with outline, and use a negative outline-offset value.
*Note that this is not supported by Internet Explorer
div {
background: black;
outline: 5px solid yellow;
outline-offset: -10px;
width: 300px;
height: 300px;
}
<div></div>
I am new to HTML programming. Is it possible to make a border to the margin instead of the padding? I need this just for design purposes only.
Is it possible to make a border to the margin instead of the padding?
Yes. The closest way I can think of to achieve this effect is using the CSS background-clip property:
background-clip: padding-box;
This clips any backgrounds in the element not to be rendered in the border region, thus treating it like a margin rather than padding.
Below is an example of the difference:
div {
border: 5px dashed #000; /* to see through border */
background-color: #0FF; /* to show extent of background */
padding: 5px;
margin: 10px;
}
.adjusted {
background-clip: padding-box; /* corrects extent of background */
}
<div>Default Border</div>
<div class="adjusted">Corrected Border</div>
In the "corrected" div, the border becomes part of the margin visually rather than part of the padding.
Make your padding the size your your current padding + margin, then set your margin to 0 pixels. This will have the same effect.
I don't think this is possible but if you want to enclose the margin within a border then there can be a workaround.
Enclose the element with span and set the border for that span element as,
.inner{
padding: 5px;
margin: 5px;
}
.outer{
border: 1px solid black;
}
<div class="outer">
<p class="inner">Hello</p>
</div>
Here is a demo
In designing a fluid layout, how do you use borders without ruining the layout.
More specifically, I have a HTML widget which consists of five divs. I would like the five divs to take up all the room in the containing element. I would also like to have a 1px border around each.
I tried:
.box { float: left; height: 100%; width: 100%; border: 1px solid red; }
This doesn't work: there will be an extra 10px in width causing the boxes to wrap. Reducing the width percentage doesn't work as it will not take up the correct amount of space and for certain page sizes, will still wrap.
Whats the proper way to manage the interaction between these elements?
See this article.
Basically, in the "traditional" CSS box model, the width of a box element only specifies the width of the content of the box, excluding its border (and padding).
In CSS3, you can switch to a different box model as follows:
box-sizing: border-box;
Browser-specific implementations of this are:
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
This will cause the box sizes to include the element's border and padding. So you can now specify
.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
width:20%;
border:1px solid red;
float:left
}
and have the five divs take up all the width of the containing element without wrapping.
Note that this is not supported by older browsers. For these, you'll have to wrap each box into a second box, as per other responses on this page.
Only put width: 100% on the outermost div, and don't put a border on it. If you do this, then the inner boxes will fill the space (assuming you haven't floated them or anything) since they're block elements, and you won't have to worry about borders adding to the total size.
If you really need the appearance of five solid single pixel nested borders, you can do something like this (with properly semantic names, hopefully):
<div class="one">
<div class="two">
<div class="three">
etc.
</div>
</div>
</div>
<style>
.one {
width: 100%;
}
.two {
border: 1px solid red;
padding: 1px;
background: red;
}
.three {
border: 1px solid red;
background: white;
}
</style>
As you can see, you can fake the second border using padding and background colors on the second div (might even cut down on the total number of divs by doing this; just remember you can't pad the outmost div without screwing up your width).
Oh boy, I almost hate to mention this, but there is a very easy way to do this in a horizontal bar. It isn't "pixel perfect" except at your minimum width, but is not discernible to the naked eye.
Divide the container div by the number of items. Let's say, you have six nav items with a white border (this is especially good for numbers that don't divide into 100 because it won't be perfect in any case).
Set your total width for each left-floated child div to the correct fraction (using % for left or right margin or padding) so that they equal # 100%. Go ahead and put a 1px border-right on the child divs. For the last div at the right end, either make a second class with no border or just use style='border:none'.
Then, at your minimum width, slowly drop the width of each child div until they fit.
Here is a bit of code from an old page of mine using this method for a liquid page with minimum width of 960px (958 px and a 1px border on each side):
.navitem {
width: 16.57%;
height: 35px;
float: left;
text-align: center;
font: 1em/35px arial,sans-serif;
border-right: 1px solid #eee;
margin: 0 auto 0 auto;
padding: 0;
}
I think it actually is as close to pixel perfect as you can get at minimum width, and at higher widths although the right-hand div is maybe 4 px wider than the others, you can't tell by looking at it. (Obviously, this wouldn't work if you need a right border on the right-most div, since you'd see a few pixels of background.)
This will get you fairly close but not 100% of the way (pun intended). To give an element 100% height it needs to know "100% of what?". All parent elements must also be given 100% height and this includes the body. Or as the W3C put it: "If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'." As you can see we also need to give the body "position: absolute;" for the height to be honored. This example also divides the width into five equal columns with borders (and some padding and margin just for fun):
<style>
body {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
/* overflow: hidden; */
}
div.section {
float: left;
width: 19.95%;
height: 100%;
}
div.column {
height: 100%;
border: 1px solid blue;
margin: 1em;
padding: 2em;
}
</style>
<div class="section"><div class="column">one</div></div>
<div class="section"><div class="column">two</div></div>
<div class="section"><div class="column">three</div></div>
<div class="section"><div class="column">four</div></div>
<div class="section"><div class="column">five</div></div>
As you can see when you test it we have no problem with the witdh. This is because the "sections" that divide the width have no padding, margin or borders. Thus the width we set will be the width they occupy on screen. Now, this is not strictly true in practice. I have actually set the widths 19.95% and not the expected 20%. Problem is that some browsers (IE for one) have a rounding error when adding up percentages and the more subdivisions to add up the greater the error.
Where this method obviously fails is when it comes to the height. Unlike "width: auto;", which will make the div occupy the available horizontal space, "height: auto;" will only make the div as tall as its content. You have to specify "height: 100%;" to get the div to fill the height of the window but alas, when adding margin, padding and borders, the rendered height of the div becomes greater than the viewport, resulting in a vertical scrollbar.
Here I can only really see two choices; Either 1) accept that the divs don't quite fill the window height and set their height to maybe 80% or 2) Skip the bottom border and set the body to "overflow: hidden;", which will crop off the parts of the divs that protrude beyond the edge of the window.
Finally, of course you could also make use of some simple scripting to achieve what you're after. Shouldn't be very complicated at all - but that's a question with another tag... Happy coding!