I need to create a HTML div with custom border. According to what the designer told me, the border has a radius of 3px and stroke of 8px, color f7f7f7 and position outside
What I have so far is:
div#content {
padding : 10px 20px;
border-style : solid;
border-width : 8px;
border-color : #F7F7F7;
-webkit-border-radius : 3px;
-moz-border-radius : 3px;
border-radius : 3px;
}
I really don't know what the stroke effect is and how to do it with css.
Stroke basically means outline or border - this is the professional name of it. your code seems fine. didn't it work?
It works in this jsFiddle. it creates a thick, light grey border with a little bit of rounded corners.
also, you can use shorthand: border: 8px solid #f7f7f7;
i understand 'stroke' as outlined , like usually said for a text effect.
I would go ,since outline isn't friendly with radius:
div {
border:solid; /* no info for size nor color yet */
box-shadow: 0 0 0 8px #f7f7f7;
border-radius:3px; /* prefix not needed anymore */
}
What you are looking for is border: dashed;
If the designer said stroke, chances are they mean dashed.
I've updated Yotam's fiddle
border-style : dashed;
jsfiddle
Related
Let's say someone is working on a web site that allows users to create a profile. This designer really likes the way input fields look with rounded corners, but Chrome's autofill feature is doing something odd to them. Of course, they could take the easy way out and remove the border-radius definition, therefore avoiding the weird corners, but then the site wouldn't have the look they were hoping for.
Here are before-and-after images of what the fields would look like when autofill is used.
And here's a JSFiddle for anyone that would like to play around with it.
If helpful, here is the relevant code being used to modify the fields:
.field {
background-color: #202020;
border: 1px solid #000;
border-radius: 4px;
box-shadow: 0 0 5px #000;
color: #d8d8d8;
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
Several attempts were made to find the culprit behind this problem, including removing the outer shadow from both definitions, as well as changing the inner shadow's position and blur radius. The greyish corners were still there. The only real "solution" was to revert to square corners, but that option is being reserved as a last resort.
After numerous searches for a solution to this issue, all that could be found were ways to circumvent the default pale yellow background. And that's great news, but the designer is still left with those ugly corners. Is there a way to get rid of them entirely and maintain the field's original style? or is it a glitch that has no work-around?
Thank you for any insight or help you can provide.
Kreven's solution, while not the most elegant line of code, will definitely get the job done for most people I reckon. However, I'd like to modify it a bit and explain why it even works in the first place. Let's take a look at this line of code:
transition: background-color 2147483647s;
Here is a transition that would take 68.24 years to complete. Looks silly, right? If you're wondering where that magic number came from (2147483647), this is the maximum size of an integer, and thus the maximum duration for a CSS transition. What this transition is doing is making it take 64 years for your browser's autofill implementation to change the background color of your input.
It's also worth noting that this cheap trick will negate the need for you to use the "-webkit-box-shadow" CSS command (unless, of course, you need the autofill background-color to be different than the non-autofill background-color).
Hope this helps somebody! Cheers.
I found that increasing the border width and making it the same colour as the input background seems to help. Then reduce the padding to achieve the same height:
https://jsfiddle.net/Lguucatv/1/
border: 4px solid #202020;
padding: 1px;
Also modified the box-shadow to match original design:
box-shadow: 0 0 0 1px #000, 0 0 5px 1px #000;
Is there a way to get rid of them entirely and maintain the field's original style?
Here is the css
body {
background-color: #282828;
}
.field {
background-color: #202020;
border: 1px solid #000;
color: #d8d8d8;
margin: 100px; /* adding space around it to */
padding: 5px; /* make it easier to see */
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
DEMO
add transition to background-color with high animation time to the .field element
.field {
...
transition: background-color 5000s;
}
solutuion found here
demo on codepen
I fixed the problem by adding this to my css:
#media (prefers-color-scheme: dark) {
[data-theme*=dark] {
color-scheme: dark;
}
}
This is for web dev. When using a 1px border radius on a circle or a square with really rounded corners, the stroke starts to break. If we were to change it to 2px's it would get better and better the more px we add. But is there a way to fix this problem with a 1px stroke?
background: rgba(32, 32, 32, .9);
height: 30px;
width: 30px;
border: 1px solid white;
border-radius: 20px;
:hover {
height: 300px;
width: 200px;
}
Images attached!
add box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; that will give you the anti-aliasing you're looking for.
There isn't much you can do about this, unfortunately. That's up to the browser to determine how to render the sub-pixels that make up a curved 1px border. Some browsers will antialias it nicely, others will not.
The only reliable solution is to use images, which is so... 90s. Or something XD Point is, we shouldn't have to do things like that, but sometimes we have to either settle for imperfect rendering, or use outdated methods.
This is common when having a background and a border specified. The only way to fix this would be to have two separate elements, one with the background color and one with the border color with padding equal to the border-width.
See this article for a better explanation.
I added 1 pixel border to the image. At the same time I am trying to give radius to the image edges.
My problem is since the image is already rounded with photoshop, the border of edges look thinner than it should be
You can check it from here.
http://jsfiddle.net/fVNgA/
How can I make the border even?
img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; }
<img src='http://carantina.com/wp/wp-content/themes/new/images/home_pic1.jpg'>
Wrap image into a span and add css to it
http://jsfiddle.net/96wVp/
Add "padding: 1px;" to the image styles :)
By the way, here is another thread outlining a similar issue, and the reasons for is: CSS 3 border-radius property; corners too pale in Chrome?
The problem isn't so much the border as how it's applied and the image you're using. Try rounding the corners in Photoshop with a 6px radius and save it as a png with a transparent background. What's happening is you're placing a border then the border is actually moving under the corner of the image. Since your image is a jpg and jpg's don't support transparency your rounded corners actually have square white corners. Here is an example of your image with a transparent image rather than a jpg.
http://jsfiddle.net/calder12/fVNgA/6/
Code just because they won't let me post a fiddle without code... sometimes it makes sense >.>
<style>img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; } </style>
<img src='http://calderonline.com/images/home_pic1.png'>
Chrome uses square corners for the inner borders. So in Chrome, you won't be able to get the exact feel, where as in Firefox, it uses rounded corners even for the inner borders.
Screenshot in Chrome and Firefox
My advice is it is better to include the generic border-radius and also, for Chrome, a fix would be adding overflow: hidden; and padding: 1px;.
CSS
img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; /* Add this for fallback */
overflow: hidden; /* Hack for Chrome */
padding: 1px; /* Hack for Chrome */
border: 1px solid #000;
}
After Chrome Hack
So I have a text input, im using html5, on chrome, and I want to change the look of a text input, I've removed the outline on focus (orange on chrome), I set the background to a light color #f1f1f1 but now there is like a thicker border on the top and left sides, like it's meant to look pushed in, when there is no change in background color this doesn't happen. How do I remove it? Sorry I can't provide a picture, on a mobile device.
It happens on chrome, ie, and Firefox, can't test any others.
border-style:solid; will override the inset style. Which is what you asked.
border:none will remove the border all together.
border-width:1px will set it up to be kind of like before the background change.
border:1px solid #cccccc is more specific and applies all three, width, style and color.
Example: https://jsbin.com/quleh/2/edit?html,output
This is the solution for mobile safari:
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
as per https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
and as suggested here: Remove textarea inner shadow on Mobile Safari (iPhone)
None of the solution are working currently.
Here is my solution. You can add prefixes.
box-shadow: inset 0px 0px 0px 0px red;
Add border: none or border: 0 to remove border at all, or border: 1px solid #ccc to make border thin and flat.
To remove ghost padding in Firefox, you can use ::-moz-focus-inner:
::-moz-focus-inner {
border: 0;
padding: 0;
}
See live demo.
Set border: 1px solid black to make all sides equals and remove any kind of custom border (other than solid).
Also, set box-shadow: none to remove any inset shadow applied to it.
Try this
outline: none;
live demo https://codepen.io/wenpingguo/pen/KQgbXq
All browsers, including Safari (+ mobile):
input[type=text] {
/* Remove */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Optional */
border: solid;
box-shadow: none;
/*etc.*/
}
I'm working on firefox. and I was having the same issue, input type text are auto defined something looks like boxshadow inset, but it's not.
the you want to change is border... just setting border:0; and you're done.
here is a small snippet that might be cool to try out:
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}
note that: border-style removes the inner shadow.
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}
<input type="text"/>
So I'm using
-webkit-border-radius: 10px;
for a text entry field right now, but the problem is that once the field is selected, there is a border without the border radius modified.
So my question is does anyone know how to modify this?
I don't know if you can set the outline to have a radius like the border but you can remove it with
outline:none;
Besides the outline you may also use
-webkit-appearance: none;
No webkit equivalent to -moz-outline-radius at the moment
While there's no (so far as I'm aware) cross-browser implementation of outline-radius, or even a vendor-prefixed implementation other than the -moz- variant, you could perhaps emulate it with an inset box-shadow:
.elementClass {
padding: 0.2em;
outline: none;
border: 1px solid #000; /* in Chromium 18/Ubuntu 11.04 setting
the border is required for the outline
to be applied, this may not be true elsewhere */
border-radius: 0.4em;
}
.elementClass:focus,
.elementClass:active {
box-shadow: inset 0 0 1px 2px #f90;
}
JS Fiddle demo.