Please see the attached image and jsfiddle: http://jsfiddle.net/chqy9dja/
A simple textarea, with rounded corners. Notice the problems on the right top and right bottom corners, where the scroll bar appears. The screenshot is taken with Chrome, but all other browsers share this bug.
I know this can be fixed with a jquery/javascript plugin, but I'm looking for a css-only approach.
I only need to add some padding between the scrollbar and the border.
Tried this, best solution so far: wrap the textarea in a div, style the div instead. Works, only minor problems appear when focusing on the element.
Tried to replace the border with an outline, and add outline-offset using css. Works great, problem is that outlines can not have rounded corners..
Any other ideas please? Style directly on the textarea, not a wrapping div.
<textarea id="a" class="a" />
.a {
width: 300px;
height: 300px;
border-radius: 10px;
border: 1px solid #000;
}
As you mentioned, outline can not have rounded corners. One option would be using a combination of border and box-shadow.
For instance you could give the element a transparent border and a proper box-shadow as follows:
Example Here
textarea {
width: 300px;
height: 300px;
border-radius: 10px;
box-shadow: 0 0 0 3px #000;
border: 5px solid transparent;
}
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 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 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 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'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 */
}