CSS - Border Where Only Half of a Border Is Visible

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



Leave a reply



Submit