Observe the below simple example:
div {
border-bottom: 1px solid black;
border-radius: 20%;
padding: 10px;
}
<div>Test</div>
In Safari, this causes part of the upper borders to be drawn:
I don't want those "ghosted" upper borders. How do I compensate for this?
You need to remove the rounded border on the top side of your div like so:
div {
border-bottom: 1px solid black;
border-radius: 0 0 20% 20%;
padding: 10px;
}
This is using the border-radius shorthand with 4 values where
first value applies to top-left, second value applies to top-right,
third value applies to bottom-right, and fourth value applies to
bottom-left corner"
https://www.w3schools.com/cssref/css3_pr_border-radius.asp
Related
Inside of my textarea, I wish to maintain a padding of 30px from the top.
textarea {
display: block;
width: 300px;
height: 50px;
padding-top: 30px;
}
However, once the text-area is filled with text and the content starts scrolling. The padding is no longer maintained.
http://jsfiddle.net/w47wbq77/
When you run this fiddle, initially you'll notice that the padding from top (inside of the textarea) is maintained. However, the minute you have more than 150 characters, the padding is gone.
Any solution to this ?
I would remove all styling from the text area, and wrap it in a div that looks like a text area
.wrapper {
border: 1px solid #aaa;
padding-top: 30px;
}
textarea { padding: 0 }
You might have to fiddle about with border radius etc, but that would maybe do it
It looks like for the textarea element the padding is added, but the text is still visible in the padding zone.
I haven't really found a good solution so I came up with a workaround using a combination of border and outline to mimic the padding inside the textarea:
textarea {
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 0px solid transparent;
border-left: 0px solid transparent;
outline: 1px solid #dadcde;
}
The top and bottom transparent borders are the actual padding. They add extra space between between the text and the textarea.
The left and right transparent borders prevent border artifacts left due to how the borders are calculated and drawn in the browsers.
The outline is the actual visible border of the textarea and replaces the border property.
Here's a jsFiddle example to show how it works
I think the correct it's usage a "margin", but for you request can be:
http://jsfiddle.net/Lhderpup/
.padTextarea {
background-color: white;
padding-top: 30px;
display: table;
border: 1px solid #CCC;
}
Adding a new DIV. More about, Margin, Padding, etc:
Difference between margin and padding?
I hope I have helped.
while looking at the border property w3c specs, trying to determine what {1,4} means? is it width? I believe width can't be restricted between 1-4, so what is it?
[ thin | medium | thick | <length> ]{1,4} | inherit
It means that you can set there between 1 and 4 values.
Examples
border: 1px = border: 1px 1px = border: 1px 1px 1px = border: 1px 1px 1px 1px
border: 1px 2px = border: 1px 2px 1px = border: 1px 2px 1px 2px
border: 1px 2px 3px = border: 1px 2px 3px 2px
border: 1px 2px 3px 4px
// values behind "=" are equivalent, you can choose what is better for you.
Values order
Order of values is: top - right - bottom - left
General Info
When you set only one value, it means: "set this border to all sides"
When you set two values, the first one is border-top and bottom, the second one is for border-left and right.
When you set three values, the first one is for top, the second one for right and left, the third one for bottom.
When you set all values, it´s top-right-bottom-left.
I only refers to syntax. From the Mozilla Developer Network:
Formal syntax: {1,4}
border-width: width /* One-value syntax */
border-width: horizontal vertical /* Two-value syntax */
border-width: top horizontal bottom /* Three-value syntax */
border-width: top right bottom left /* Four-value syntax */
So you can define border-width using 1, 2, 3, or 4 values. If you use:
(One value) It applies to all sides.
(Two values) The first value is applied to the horizontal (i.e. top and bottom), and the second to the vertical (i.e. left and right)
...and so on.
A lot of CSS properties inherit a similar pattern, such as the shorcut for padding, margin, etc.
You can either specify one border property for the entire element or four separate borders for left, right, top and bottom of the element.
p { border: solid red }
p {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Another example is given in the specs of border-style property:
#xy34 { border-style: solid dotted }
In the above example, the horizontal borders will be 'solid' and the vertical borders will be 'dotted'.
{1-4} means that you can specify 1, 2, 3 or 4 values or the property.
The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.
I have a div with a padding and I would like to add an "internal" border, considering padding. For example, consider to have this CSS:
div#border {
padding:10px;
border:1px solid;
background-color:#ccc;
}
My goal in this case is to create an internal solid border, far 10px from div border, but I only get an external border (jsFiddle). Adding an internal div does the trick but adds an extra HTML element (jsFiddle):
div#border {
padding:10px;
background-color:#ccc;
}
div#internal {
border:1px solid;
}
I've tried to add an outline as suggested here, but when I have two adiacent divs with outline, there's an overlap between (jsFiddle).
Is there a pure-CSS solution to add an "internal" border to a div, considering padding, without adding extra HTML elements and without overlapping on adiacent divs?
Solution #1 Use box-shadow with inset
We can take advantage of the fact that multiple values can be used for the box-shadow property.
The trick here is to set the first inner shadow with the background color of the div, and the second inner shadow - which is slightly larger - with the color of the border.
FIDDLE
div#border {
padding: 10px;
box-shadow: inset 0 0 0 9px #ccc, inset 0 0 0 10px black;
background-color: #ccc;
}
<div id="border">some content</div>
Solution #2 Use outline with the outline-offset property.
outline:1px solid;
outline-offset: -10px;
FIDDLE
div#border {
padding: 10px;
outline: 1px solid;
outline-offset: -10px;
background-color: #ccc;
}
<div id="border">some content</div>
I want my box to look like this except for the left side to be blank:
.box{
width: 190px;
height: 90px;
display: inline-block;
padding: 5px;
margin: 50px;
}
#box4sides{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 1px 1px #dbdbdb;
-webkit-box-shadow: 0 0 1px 1px #DBDBDB;
box-shadow: 0 0 1px 1px #DBDBDB;
background: white;
border: 1px solid #CDCDCC;
}
Here is my best attempt:
http://jsfiddle.net/7dpUA/2/
I found other examples of 3-sided boxes, but they were with either the top or bottom removed, and I haven't been able to translate that to my case.
My recommendation is to remove the class shadow from your 3 sided box and add this bit of css on your 3-sided box.
box-shadow: 1px 1px 1px 0 #DBDBDB, 1px -1px 1px 0 #DBDBDB;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
Explanation of the box-shadow property:
box-shadow: 1 2 3 4 color;
Horizontal Offset - Positive values move the shadow right, negatives left.
Vertical Offset - Positive values move the shadow down, negatives up.
Blur Radius - The larger the value, the blurrier it is.
Spread Distance - Positive values expand the shadow, negatives contract.
Color is pretty self-explanatory. Here is your jsFiddle edited to show what you want.
As far as the shadow is concerned, you don't need position: relative; anymore either.
Create a wrapper div around the box with overflow as hidden and give a negative margin for the #box4sides div.
Check this jsFiddle : http://jsfiddle.net/7dpUA/22/
Is this what you need?
Is this what you're looking for? I exaggerated the borders and such for emphasis and increased the first argument on the shadow element to throw it to the right a bit, avoiding a "false border" effect.
This question already has answers here:
Placing border inside of div and not on its edge
(15 answers)
Closed 1 year ago.
On click I am adding, 1px border to div, so Div size increases by 2px X 2px.
I dont want to get div size increased. Is there any simple way to do so?
Messy Detailed Explanation
Actually I am adding DIVs with float:left (same size, like icons) to a container-div, so all stacks up one after another, and when (container-div width is 300px) no space left width-wise so child DIVs comes in next row, so its like catalog, but because of border only selected DIV size get increased, DIV under selected DIV goes to right and creates empty space below selected DIV.
EDIT:
Decreasing Height/Width on selection, but how to increase it back. Using some 3rd party framework, so don't have event when DIV loses selection..
This is also helpful in this scenario. It allows you to set borders without changing div width
textarea {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Taken from http://css-tricks.com/box-sizing/
If you don't have a border-radius change border to outline:
outline: 1px solid black;
Having used many of these solutions, I find using the trick of setting border-color: transparent to be the most flexible and widely-supported:
.some-element {
border: solid 1px transparent;
}
.some-element-selected {
border: solid 1px black;
}
Why it's better:
No need to to hard-code the element's width
Great cross-browser support (only IE6 missed)
Unlike with outline, you can still specify, e.g., top and bottom borders separately
Unlike setting border color to be that of the background, you don't need to update this if you change the background, and it's compatible with non-solid colored backgrounds.
The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug (discontinued), under the html->layout tab.
Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.
For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.
Eg:
div.navitem
{
width: 15px;
height: 15px;
/* padding: 5px; */
}
div.navitem .selected
{
border: 1px solid;
width: 13px;
height: 13px;
/* padding: 4px */
}
set a border on it before you click to be the same color as the background.
Then when you click just change the background color and the width will not change.
Another good solution is to use outline instead of border. It adds a border without affecting the box model. This works on IE8+, Chrome, Firefox, Opera, Safari.
(https://stackoverflow.com/a/8319190/2105930)
I usually use padding to solve this issue. The padding will be added when the border is not there and removed when it is back. Example:
.good-border {
padding: 1px;
}
.good-border:hover {
padding: 0px;
border: 1px solid blue;
}
See my code here: https://jsfiddle.net/3t7vyebt/4/
Try this
box-sizing: border-box;
Sometimes you don't want height or width to be affected without explicitly setting either. In that case, I find it helpful to use pseudo elements.
.border-me {
position: relative;
}
.border-me::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: solid 1px black;
}
You can also do a lot more with the pseudo element so this is a pretty powerful pattern.
Just decrease the width and height by double of border-width
You can do some fancy things with inset shadows. Example to put a border on the bottom of an element without changing its size:
.bottom-border {
box-shadow:inset 0px -3px 0px #000;
}
Try decreasing the margin size when you increase the border
I needed to be able to "border" any element by adding a class and not affect its dimensions. A good solution for me was to use box-shadow. But in some cases the effect was not visible due to other siblings. So I combined both typical box-shadow as well as inset box-shadow. The result is a border look without changing any dimensions.
Values separated by comma. Here's a simple example:
.add_border {
box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}
jsfiddle
Adjust for your preferred look and you're good to go!
We can also use css calc() function
width: calc(100% - 2px);
subtracting 2px for borders
You can try a box-shadow inset
something like this:
box-shadow:inset 0px -5px 0px 0px #fff
adds a white 5px border to the bottom of the element without increasing the size
.filter_list_button_remove {
border: 1px solid transparent;
background-color: transparent;
}
.filter_list_button_remove:hover {
border: 1px solid;
}
You can create the element with border with the same color of your background,
then when you want the border to show, just change its color.
In case content of your div is rendered dynamically and you want to set its height, you can use a simple trick with outline:
button {
padding: 10px;
border: 4px solid blue;
border-radius: 4px;
outline: 2px solid white;
outline-offset: -4px;
}
button:hover {
outline-color: transparent;
}
Example here: https://codepen.io/Happysk/pen/zeQzaZ