I'm trying to use a border property on a div that is using a border-radius property.
Here's my CSS:
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
So as you can see I just put a border radius (with all different properties for each browser) as well as a border of 1px. The problem is border isn't drawn on both top corners. It's drawn everywhere else including bottom corners. I looked for something on google but can't find anything...
Any idea ?
Problem in the other markup and styles, because your css is correct: testcase on dabblet
Try to add some margin: #page { margin: 15px; } May be border is simple invisible or container of #page hide border with overflow: hidden;
Update: Problem also may be exists in inner images which can override or ignore some parent properties (e.g border-radius).
I guess due to some issue with height the bottom part is will be hiding, can you set some height on it.
The page height is not defined. That is why it is spanning the whole window and you are not able to see the other borders.
Maybe that's the reason it's not working.
I just made some changes. See the fiddle.
HTML
<div id=page></div>
CSS
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 10px auto; /* the extra line */
height: 200px; /* the extra line */
}
Related
I've made a CSS progressbar, using 2 overlapping elements. The CSS for the elements is as follows:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000;
cursor: pointer;
}
#status_progressbar_progress {
height: 22px;
background: #eee;
float: right;
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
/* width controlled by Rails backend, using inline style */
}
Unfortunately, the background from the parent is partly visible at the right edge, as you can see clearly in this picture. Since the background from the child element should precisely overlap the parent element, I don't know why this is the case.
[Picture taken in Firefox 4]
Maybe someone could explain to me why this is happening and how to solve it?
This is a known problem. One way around it, is by nesting rounded elements when you need a colored border. Pad the other box with the same amount as the width of the border.
More information can be found in this blog post by #gonchuki: Standards Compliancy is a lie (or, how all browsers have a broken border-radius)
An alternative COULD be to simply use the status_progressbar div (no children). Create an image that is wide enough (say 1000px) and the colour of your choice (personally i'd create one white 50% opacity).
then:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000 url("/path/to/image') repeat-y 0 0;
cursor: pointer;
}
I would then manipulate the background position property with javascript ALWAYS providing a px value NOT a % as %50 would center the image.
var prcnt = (YOURPERCENTAGE/100)* 366;
I was able to get a pretty good result by adjusting the CSS Slightly. (DEMO - Tested in Chrome & FF)
#status_progressbar_progress {
...
margin-right:-1px;
...
}
This just nudges the grey div to the right by a pixel. You can even up it to 2 pixels, which I think looks even better. Make sure you compensate for that pixel change in your calculations.
I think this happens because the browser tries to antialias the border and it probably does that by adjusting transparency so your under div is black and top gray so black gets trough. (don't quote me on this but thats atleast what seems logical to me).
Have you tried wrapping both status_progressbar and status_progressbar_progress in another div and give border-radius and overflow:hidden to that div?
You could try changing the border radius on the right hand side up by 1px on the background element. That might make it disappear behind the front
I am facing the same issue mentioned in Unwanted white space on mobile version and as per the solution there, I looked for the elements which are 100% width and having padding. For such elements, I gave box-sizing: border-box; like below but the issue persist.
input[type=text], input:focus {
width: 100%;
padding: 12px;
border: 2px solid #ccc;
border-radius: 27px;
resize: vertical;
margin-right: 5px;
margin-left: 5px;
height: 35px;
box-sizing: border-box;
}
Can any one help me how to debug trough inspect, which element is blowing out. I could not figure out by looking at inspect element, computed styles.
looks fine in vertical view -
Issue in horizontal view -
https://jsfiddle.net/vky60wz7/1/
Because max-width is defiened as 540px
see here
if you disable this it will be ok
You can try two things. first instead of width, give a min-width. Second, check that the parent elements display is not affecting this.
I would like to draw a border around an image with no visible gap between the image and the border.
img{
display: block;
border: 1px solid black;
}
<img src="https://files.catbox.moe/r099uw.png">
Result of above snippet in Chrome (Version 84):
There is a small gap between the image and the border to the right and below the image.
The answer to this similar question suggests setting display: block on the image, but this does not seem to solve the problem in this case. Based on other answers I have also tried vertical-align:bottom, padding:0, margin: 0; adding width/height, but all to no avail. Increasing the border to 2px gets rid of the gap, but is not an ideal solution.
I tested the above snippet in Chrome, Firefox, and Microsoft Edge. It displays without a gap in Firefox, but with a gap in Chrome and Edge.
How can I create a bordered image that displays consistently without a gap across all platforms?
It appears that adding box-sizing: border-box; as well as a specific height solves the problem in Chrome and Edge.
img{
border: 1px solid black;
height: 16px;
box-sizing: border-box;
}
<img src="https://files.catbox.moe/r099uw.png">
If anybody knows a better solution, or why this is necessary, please let me know.
Edit: This solution is not perfect, as the gap can reappear depending on the position of the image. For example:
img{
border: 1px solid black;
height: 16px;
width: 16px;
box-sizing: border-box;
position: relative;
left: 1px;
}
span{
border: 1px solid red;
}
<span>
<img src="https://files.catbox.moe/r099uw.png">
</span>
Result in Chrome (zoomed in for detail):
You can fix this with css styling. This is what we can do, let's define a css class or id with desired width and height that you would like to have for image. Now use your image as background for defined div or class. Stroke/Border effect can be done by giving border to defined class or id. Once you're done you can adjust your image by making some changes to background-size. That will make you image zoom in or zoom out. So you can easily cover up the gap for any image. Here is the code
HTML :
<div id="image"> </div>
CSS :
#image {
display:inline-block;
width:30px;
height:30px;
border:1px solid #000;
background-image:url(TOn2E.png);
background-repeat:no-repeat;
background-position: center;
background-size: 150%
}
For adjusting image you can make changes to background-size in percentage.
try this:
img {
outline: 1px solid black;
}
<img src="https://files.catbox.moe/r099uw.png">
Also, if necessary, try to append outline-offset, like outline-offset: -1px;
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 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