I have a table with rounded corners on the bottom, created with:
border-bottom-left-radius:pixel;
and same for the right bottom.
When I add:
bottom-border-dotted;
border-bottom-color:white;
the dotted white border appears correctly (rounded), but the table bottom reverts back to a rectangle. I have a solid background color in this table. When I replace" bottom-border-dotted, with border-bottom-solid, with the same white color everything is fine.
I just love the dotted border, especially at Christmas.
I think you have some errors in the CSS. F.e.: bottom-border-dotted; is not valid CSS. You should use border-bottom: 3px dotted black; or border-bottom-style: dotted;.
Try this example (see JSFiddle)
HTML
<div></div>
CSS
div {
display: inline-block;
width: 300px;
height: 300px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: solid 3px black;
background-color: #cccccc;
border-bottom: 3px dotted black;
}
Result
Above code will create something like this:
Related
I try to create a handwritten looked underline to input.
With this complex border-radius, Chrome looks great. In Safari, however, these artifacts appear.
I tried to fix it with
-webkit-background-clip: padding-box;
from: https://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
input {
border: none;
border-bottom: 2px solid;
border-radius: 130px 50px/4px 2px;
}
https://codepen.io/matzR/pen/dybpXgO
Safari: artefacts over the input
Safari seems to have some interesting decisions as far as figuring out the border color goes. Try zooming at this, for instance:
input {
border: 0.001px solid white;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
I guess the linked workaround doesn't work because the border isn't inside the element?
But this is OK (codepen):
input {
border: 1px solid transparent;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
<input>
My other considerations were using a SVG element for background and/or using border-image-slice to simulate the behaviour.
I am wanting to create inline-block divs in CSS that have diagonal sides by having a top width of lets say 200px and a bottom width of 100px. Is this possible? If so, how? Or what would anyone suggest as a better alternative?
The box model of HTML implies that divs are always rectangles. However you can get a very decent result using some techniques. The simplest one is too use css to tint just the part of your background needed. You set the width to the wider side and then use the border-left right and bottom properties to adjust the shape. For example:
.myDiv {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
You can see it working here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid
The w3school also have a very interesting page with a lot of shapes you can create with css. Check it here: https://www.w3schools.com/howto/howto_css_shapes.asp
Are you looking to create a trapezoid?
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
<div class="trapezoid">
</div>
Ok, so for the sake of argument i have a box with a grey left and right border with an 8 pixel border bottom with a different colour.
The way borders display is showing the bottom border inside the left and right border. Ive done some research but i cannot find a way that is possible for the bottom border to display under the side borders as apposed to inside them. Sorry if i have not explained this too well please feel free to ask if you need any more information. Please follow the link below to a quick fiddle i have created.
<div class="bg">
<div class="box">
Box
</div>
</div>
.bg {
background-color: #fff;
width: 72%;
float: left;
height: 100%;
padding: 100px;
}
.box {
background-color: #fff;
height: 200px;
width: 200px;
float: left;
margin-left: 100px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 8px solid black;
}
http://jsfiddle.net/L06s4k50/
Thanks in advance people.
I think the best way of going about this is to forgo the border-bottom completely, and instead use a box-shadow property:
.box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 8px black;
}
How can I make border-left the same height as border-right? In other words, how to change the order of the borders? Border-left is taller than border-right. Which results in a 1px "gap".
.tab-header > ul > li
{
display: inline-block;
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
border-top: 1px solid #cecece;
padding: 8px;
font-size: 10px;
text-transform: uppercase;
}
What is happening, is that the css tries to make a nice diagonal colour change in the border. If you change all the 1px to 10px, you see the problem. (Image, see: http://jsfiddle.net/DaTCy/1/)
If you are using 1px widths of the borders, the bottom and the right border will always overlap in the bottom-right pixel.
EDIT: As a solution, you can try giving the bottom border a width of 0px, and solving the height problem in the container you put the button in.
The simplest solution is to explicitly use:
border-bottom-width: 0;
JS Fiddle demo.
Use border-left/-top/-right and border-bottom for different [nested] elements.
this is my CSS of a DIV Tag for a Marker /ToolTip .
<div class="flotr-mouse-value">
position:absolute;
z-index:1;
background: #FFD772;
height: 75px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
position: absolute;
box-shadow: 3px 3px 3px #666;
left: 50px;top: 50px;
width: 150px;
height: 80px;
</div>
Waht i want is that , to have a down arrow at the bottom of the border similar to as shown here
http://www.tiikoni.com/tis/view/?id=fa381ec
I have tried modifying the below attribute , but of no use
border-bottom:
You can make a triangle by using code like:
border-color: #ff0 transparent transparent transparent;
It looks like this:
Here's the code for that example http://jsfiddle.net/hyH48/
There are a lot of limitations (for isntance the box shadow won't work for the triangle), but it doesn't use any images, and is pure CSS.
I used #RichBradshaw's answer but elaborated on it. While he's correct in that it's not possible (or at least very difficult) to add a shadow to the arrow, I achieved the effect by utilizing the :before and :after pseudo elements. Use Rich's code within a :after selector, and then in the :before selector, create the same arrow, offset in the direction you want your shadow, with a transparent color.
Here is an example! jsfiddle
yes, you can do it from css check this
arrow with border on it:
.arrow{
height: 20px;
width: 20px;
margin-left:30px;
margin-top:-11px;
background:red;
-moz-transform:rotate(45deg);
border-right:1px solid #000;
border-bottom:1px solid #000;
}