CSS generated content can solve this for you:
div {
position: relative;
}
/* Main div for border to extend to 50% from bottom left corner */
div:after {
content: "";
background: black;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}
<div>Lorem Ipsum</div>
(note - the content: ""; declaration is necessary in order for the pseudo-element to render)
Videos
CSS generated content can solve this for you:
div {
position: relative;
}
/* Main div for border to extend to 50% from bottom left corner */
div:after {
content: "";
background: black;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}
<div>Lorem Ipsum</div>
(note - the content: ""; declaration is necessary in order for the pseudo-element to render)
#mainDiv {
height: 100px;
width: 80px;
position: relative;
border-bottom: 2px solid #f51c40;
background: #3beadc;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
<div id="mainDiv">
<div id="borderLeft"></div>
</div>
I have another possibility. This is of course a "newer" technique, but for my projects works sufficient.
It only works if you need one or two borders. I've never done it with 4 borders... and to be honest, I don't know the answer for that yet.
.your-item {
position: relative;
}
.your-item:after {
content: '';
height: 100%; //You can change this if you want smaller/bigger borders
width: 1px;
position: absolute;
right: 0;
top: 0; // If you want to set a smaller height and center it, change this value
background-color: #000000; // The color of your border
}
No, there isn't. The border will always be as tall as the element.
You can achieve the same effect by wrapping the contents of the cell in a <span>, and applying height/border styles to that. Or by drawing a short vertical line in an 1 pixel wide PNG which is the correct height, and applying it as a background to the cell:
background:url(line.png) bottom right no-repeat;
In CSS3, you can try to (ab)use the max css function, if your browser supports it.
border-width: max(1px, 0.1em);
border-style: solid;
border-color: black;
Unfortunately this awesome CSS3 feature isn't supported by any browsers yet, but I hope this will change soon!
But in CSS2 โ no, you can't.
However, you can use JavaScript/jQuery to loop through all elements and increase the border size to 1px.
But this will eat so much performance your browser is gonna crash if you have too many elements on your page (e.g. a table with more than 50-100 rows).
So in other words, no it's not possible.
$("[id$='ReportViewerControl']").find('*')
.each(function () {
if($(this).is('#ParametersRowReportViewerControl *'))
return;
//console.log("Processing an element");
//var cls = $(this).attr("class");
// Don't add a border to sort-arrow
if ($(this).is('img')) {
return;
}
var anywidth = $(this).css('width');
var anywidth = parseFloat(anywidth);
//console.log("anywidth: " + anywidth);
//var lol = $(this).css('borderLeftWidth');
var blw = $(this).css('border-left-width');
var brw = $(this).css('border-right-width');
var btw = $(this).css('border-top-width');
var bbw = $(this).css('border-bottom-width');
var borls = $(this).css('border-left-style') == "solid";
var borrs = $(this).css('border-right-style') == "solid";
var borts = $(this).css('border-top-style') == "solid";
var borbs = $(this).css('border-bottom-style') == "solid";
var blw = parseFloat(blw);
var brw = parseFloat(brw);
var btw = parseFloat(btw);
var bbw = parseFloat(bbw);
//parseInt($(this).css("borderRightWidth"))
//console.log(parseInt($(this).css("borderLeftWidth")));
// UpdateLock = true;
// Set width to 1px where 0px
if (anywidth == 0)
$(this).css('width', '1px');
if (borls && blw == 0.0 || (blw > 0.0 && blw < 1.0)) {
//console.log("setting border width");
$(this).css('border-left-width', '1px');
}
if (borrs && brw == 0.0 || (brw > 0.0 && brw < 1.0)) {
$(this).css('border-right-width', '1px');
}
if (borts && btw == 0.0 || (btw > 0.0 && btw < 1.0)) {
$(this).css('border-top-width', '1px');
}
if (borbs && bbw == 0.0 || (bbw > 0.0 && bbw < 1.0)) {
$(this).css('border-bottom-width', '1px');
}
// UpdateLock = false;
}); // End $('*').each
It looks like different browsers handle borders thinner than 1px differently. In Firefox such borders appear to render as 1px wide, but in Chrome they go away. On the other hand it appears that Chrome renders box-shadow even if it's less than 1px, so using it instead of border might be a good idea (Christina was actually suggesting it in the comment to the question). Than again some browsers won't render box-shadow if it's too thin (Firefox does that). Additionally box-shadow does not add the the box model, so using extra margin might be necessary.
Here is an attempt at overcoming those problems. Note that I had to resort to JavaScript userAgent detection hack (just add one extra class to body if it's a webkit browser), because I wasn't able to achieve it using CSS alone.
if (navigator.userAgent.toLowerCase().indexOf("webkit") > -1)
{
document.body.className += " webkitHack";
}
/* Borders */
.border{
border:0.0625em solid black;
}
.shadowyBorder{
box-shadow: 0 0 0 0.0625em black;
/* Compensating for the fact that box-shadow doesn't count towards box model */
margin: 0.0625em;
}
.comboBorder
{
/* If it's not webkit use border */
border:0.0625em solid black;
}
/* If it's webkit use box-shadow */
.webkitHack .comboBorder
{
border: none;
box-shadow: 0 0 0 0.0625em black;
/* Compensating for the fact that box-shadow doesn't count towards box model */
margin: 0.0625em;
}
/* Extras */
td, th
{
padding:5px;
}
.em05
{
font-size:8px;
}
.em1
{
font-size:16px;
}
.em2
{
font-size:32px;
}
.box
{
display:inline-block;
height:1em;
width:1em;
}
<table>
<tr>
<th>Font size</th><th>Border</th><th>Box shadow</th><th>Box shadow in webkit</th>
</tr>
<tr>
<td>
8px
</td>
<td class="em05">
<div class="box border"></div>
</td>
<td class="em05">
<div class="box shadowyBorder"></div>
</td>
<td class="em05">
<div class="box comboBorder"></div>
</td>
</tr>
<tr>
<td>
16px
</td>
<td class="em1">
<div class="box border"></div>
</td>
<td class="em1">
<div class="box shadowyBorder"></div>
</td>
<td class="em1">
<div class="box comboBorder"></div>
</td>
</tr>
<tr>
<td>
32px
</td>
<td class="em2">
<div class="box border"></div>
</td>
<td class="em2">
<div class="box shadowyBorder"></div>
</td>
<td class="em2">
<div class="box comboBorder"></div>
</td>
</tr>
</table>
A pixel is the smallest unit value to render something with, but you can trick thickness with optical illusions by modifying colors (the eye can only see up to a certain resolution too).
Here is a test to prove this point:
div { border-color: blue; border-style: solid; margin: 2px; }
div.b1 { border-width: 1px; }
div.b2 { border-width: 0.1em; }
div.b3 { border-width: 0.01em; }
div.b4 { border-width: 1px; border-color: rgb(160,160,255); }
<div class="b1">Some text</div>
<div class="b2">Some text</div>
<div class="b3">Some text</div>
<div class="b4">Some text</div>
Output
Which gives the illusion that the last DIV has a smaller border width, because the blue border blends more with the white background.
Edit: Alternate solution
Alpha values may also be used to simulate the same effect, without the need to calculate and manipulate RGB values.
.container {
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
}
.border-100 { border-color: rgba(0,0,255,1); }
.border-75 { border-color: rgba(0,0,255,0.75); }
.border-50 { border-color: rgba(0,0,255,0.5); }
.border-25 { border-color: rgba(0,0,255,0.25); }
<div class="container border-100">Container 1 (alpha = 1)</div>
<div class="container border-75">Container 2 (alpha = 0.75)</div>
<div class="container border-50">Container 3 (alpha = 0.5)</div>
<div class="container border-25">Container 4 (alpha = 0.25)</div>
It's impossible to draw a line on screen that's thinner than one pixel. Try using a more subtle color for the border instead.