CSS half border?

[ladybug]

Hey so I have a div circle(border-radius:50%) which is filled with some color and has some text and I don't have a visible border it's transparent right now can I make the border appear only on one half of the circle? Like a half-border

 

[DobertRownySr]

14 minutes ago, stefanmz said:

Hey so I have a div circle(border-radius:50%) which is filled with some color and has some text and I don't have a visible border it's transparent right now can I make the border appear only on one half of the circle? Like a half-border

 

Have you tried

border-top-left-radius: ___ ;?

[ladybug]

10 minutes ago, DobertRownySr said:

Have you tried

border-top-left-radius: ___ ;?

Yup but still full border there is my full CSS for the div:

div{
	display: inline-block;
	border-radius: 50%;
	border:1px solid white;
	border-top-left-radius___;
	background-color: red;
	text-align: center;
	width: 30px;
	height: 30px;
	box-shadow: 1.5px 1.2px gray;	}

 

[DobertRownySr]

Just now, stefanmz said:

Yup but still full border there is my full CSS for the div:

div{
	display: inline-block;
	border-radius: 50%;
	border:1px solid white;
	border-top-left-radius___;
	background-color: red;
	text-align: center;
	width: 30px;
	height: 30px;
	box-shadow: 1.5px 1.2px gray;	}

 

Delete the line after border-top-left-radius and try putting it before border:

[ladybug]

1 minute ago, DobertRownySr said:

Delete the line after border-top-left-radius and try putting it before border:

Nope,still the same thing

[ladybug]

10 minutes ago, DobertRownySr said:

Delete the line after border-top-left-radius and try putting it before border:

Also so you mean like that? 

div{
	display: inline-block;
	border-radius: 50%;
	border:___1px solid white;
	border-top-left-radius;
	background-color: red;
	text-align: center;
	width: 30px;
	height: 30px;
	box-shadow: 1.5px 1.2px gray;	}
    
    div{
    display: inline-block;
    border-radius: 50%;
    background-color: red;
    border:1px solid white;
    border-top-left-radius___;
    text-align: center;
    width: 30px;
    height: 30px;
    box-shadow: 1.5px 1.2px gray;   }
    
    

I tried both didn't work 

[bredy]

Can you elaborate on "didn't work"? It did not work at all or not as you want?

For me, both examples look fine.

I would just provide one alternative:

 

div{
    display: inline-block;
    border-radius: 50%;
    background-color: red;
    border-width: 0 10px 10px 0;
    border-style: solid;
    border-color: gray;
    text-align: center;
    width: 300px;
    height: 300px;
}

 

[ladybug]

6 hours ago, bredy said:

Can you elaborate on "didn't work"? It did not work at all or not as you want?

For me, both examples look fine.

I would just provide one alternative:

 

div{
    display: inline-block;
    border-radius: 50%;
    background-color: red;
    border-width: 0 10px 10px 0;
    border-style: solid;
    border-color: gray;
    text-align: center;
    width: 300px;
    height: 300px;
}

 

didn't work as like there were full borders. I tried your example it doesn't work and it' s hilarious check it out it's not even a circle anymore  however that's probably because I changed the size width and height must be on 30 because I have constraints the whole thing is in a table. If I leave it at 300 by 300 there is no border so it doesn't work as well, or at least I can't see a border.(maybe it's blending with the shadow but I can't see one. 

[bredy]

Thats not how it supposed to look.

Look at it: https://codepen.io/bredy/pen/QWdXKBN

[ladybug]

wow,I don't know what happened then,but anyway in the codepen that border looks more like a shadow to me? Can it be like a line on the circle? Like an actual border on it but a thin line that goes to the half of the circle and then after that no line?

[bredy]

I dont think that is possible because a border adds a line to the element. That means your circle would be a pixel "bigger" on one side.

I would guess the easiest way to achieve what you want is to use a picture/vector graphic.

[Guest]

So I think what your after is something like this. https://codepen.io/nayr438/pen/ZEeEyMq

[ladybug]

On 5/6/2021 at 5:09 AM, Nayr438 said:

So I think what your after is something like this. https://codepen.io/nayr438/pen/ZEeEyMq

Yeah thanks!