border only half the side of a div
If by adding a second div you mean no write it in the html
you can simply use the ::after
css property on your div like this:
div { width: 100px; height: 150px; background: black; position: relative;}
div::after { content: ""; position: absolute; width: 3px; right: -3px; height: 60%; background: red; top: 50%; transform: translate(-50%, -50%);}
<div></div>
Border only on half of the div
One approach, is to style the <a>
element, rather than the contained <img>
, and use a pseudo-element whose borders we can style:
nav { width: 100%; text-align: center; padding: 0; margin: 0; background-color: #38434d; height: 99%; border-bottom: 1px solid darkred; clear: both;}/* keeping the same styling, with the addition of the position in order to position the pseudo-element */nav > a { max-width: 7%; background: #38434d; float: left; padding: .2em; margin: .1em 0 0 3em; position: relative;}nav > a img { width: 30px; height: 60px;}nav > a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; /* styling the border of the pseudo-element the same as the nav element: */ border: 1px solid darkred; /* 'removing' the top-border */ border-top-width: 0;
<nav> <a href="index.php"> <img src="resources/img/logo.png" id="logo"> </a> <ul> <li><a href="portfolio.php">Portfolio</a> </li> </ul></nav>
How to fill only half of border-bottom?
you may use a linear-gradient
, background-size
, background-repeat
and background:position
:
p { border:solid; width:350px; margin:auto; border-bottom:none; background:linear-gradient(black,black) bottom /* left or right or else */ no-repeat; background-size:50% 3px;
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
Half colored border on top and bottom using CSS
Use pseudo ::before
and ::after
on h1
tag along-with linear-gradient
as background
use height instead of border to get that styling,
header { text-align: center; background-color: #7f7f7f;}
h1{ color: #00a2e8; font-size: 40px; padding: 5px 0; display: inline-block; position:relative;}h1:before{ content:""; width:100%; height:3px; left:0; top:0; position:absolute; z-index:9; background:linear-gradient(to right, white 50%, brown 50%);}h1:after{ content:""; width:100%; height:3px; left:0; bottom:0; position:absolute; z-index:9; background:linear-gradient(to right, brown 50%, white 50%);}
<header> <h1>HEADER</h1></header>
Is there a shorter way to write a border on only one side?
You can apply border-width of 2px only to the top edge according to the documentation as following
<div class="border-t-2 border-blue-900">foo</div>
The error made was there is no utility class called border-t-1
in tailwind-CSS. Also applying border
utility class adds the the CSS styling of border-width: 1px;
which adds a border-width to all sides.
Check out the solution at tailwind playground
EDIT: Check out shingo.nakanishi's answer top apply border-top-width
of 1px
if you are using JIT mode
Image border that covers half bottom and half right only
A solution using only the image tag:
img {
/* add bottom border */
padding:0 20px 20px 0;
background:linear-gradient(blue 0 0) 100% 100% / 60% 60% no-repeat;
/* cut top corner */
clip-path:polygon(30% 0,100% 0,100% 100%,0 100%,0 30%);
}
<img src="https://picsum.photos/200">
Table Row Border - Half In, Half Out
However, although the border applies - half of it is inside the row
and half outside
This behaviour is expected and is as per specs. Refer to: http://www.w3.org/TR/CSS2/tables.html#collapsing-borders where it says:
Borders are centered on the grid lines between the cells...
It also illustrates that with a diagram with description.
Has anyone run into this before or have any solutions?
Yes, it can be easily demonstrated as in this fiddle: http://jsfiddle.net/abhitalks/xs7L9wn1/1/ and the below Snippet:
* { box-sizing: border-box; }table { border-collapse: collapse; border: 1px solid gray; table-layout: fixed; width: 70%; margin: 0 auto;}th, td { border: 1px solid gray; padding: 6px; text-align: center;}tbody > tr:nth-child(1) > td:first-child { border-left: 16px solid red; }tbody > tr:nth-child(2) > td:first-child { border-left: 8px solid green; }tbody > tr:nth-child(3) > td:first-child { border-left: 24px solid blue; }
tbody > tr:nth-child(1) > td:last-child { border-left: 16px solid red; }tbody > tr:nth-child(2) > td:last-child { border-left: 8px solid green; }tbody > tr:nth-child(3) > td:last-child { border-left: 24px solid blue; }
<table> <thead> <tr> <th>#</th> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Caption</td> <td>Description</td> </tr> <tr> <td>2</td> <td>Caption</td> <td>Description</td> </tr> <tr> <td>3</td> <td>Caption</td> <td>Description</td> </tr> </tbody></table>
css border-left 50% height
Good question. It's not possible using the border property.
The only thing that comes to mind, if you can set your div's position
to relative
, is to use an absolutely positioned, 1 pixel wide div
. Not thoroughly tested but this should work:
<div style='width: 1px; top: 0px; bottom: 50%; left: 0px;
background-color: blue; overflow: hidden'>
</div>
You'd do the same on the right hand side, replacing the left
property by right
.
Remember, the surrounding div
needs to be position: relative
for this to work. I'm not sure about whether the 50% height setting will work consistently throughout browsers - make sure you test it. You may have to resort to pixel measures if it doesn't.
How can I set a css border on one side only?
#testdiv {
border-left: 1px solid;
}
See the MDN documentation on border.
Related Topics
Making an Svg Image Object Clickable with Onclick, Avoiding Absolute Positioning
Add Spacing Between Vertically Stacked Columns in Bootstrap 4
HTML - Two Tables Side by Side
Display Adobe PDF Inside a Div
CSS Divide Width 100% to 3 Column
Transparent Scrollbar with CSS
How to Remove The Border Around an Image Without a Source
Maintain Image Aspect Ratio in Carousel
An Url to a Windows Shared Folder
Header/Footer/Nav Tags - What Happens to These in Ie7, Ie8 and Browsers Than Don't Support HTML5
How to Style Radio Buttons with Images - Laughing Smiley for Good, Sad Smiley for Bad
Change The Color of Glyphicons to Blue in Some- But Not at All Places Using Bootstrap 2
How to Control The Width of a Label Tag
Conditional Rendering of Non-Jsf Components (Plain Vanilla HTML and Template Text)
How to Create a Triangle in CSS3 Using Border-Radius
Make Anchor Links Refer to The Current Page When Using <Base>