CSS Borders Logical Properties

border-inline & border-block

border-block:8px solid orange;

border-inline:8px solid #0f0;

On a <p>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

On a <div>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
On a <table>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-inline

border-inline:8px solid #0f0;

On a <p>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

On a <div>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
On a <table>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
border-inline:medium dashed #0f0;

On a <p>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

On a <div>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
On a <table>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
border-inline: 1rem double lime;

On a <p>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

On a <div>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
On a <table>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-block

border-block:8px solid #0f0;

On a <p>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

On a <div>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
On a <table>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
border-block:medium dashed #0f0;

On a <p>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

On a <div>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
On a <table>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
border-block: 1rem double lime;

On a <p>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

On a <div>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
On a <table>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-inline and border-block individual logical properties

border-inline-start:solid;
border-inline-end:dashed;
border-inline-color:lime;
border-inline-width:8px 6px;

On a <p>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

On a <div>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
On a <table>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
border-block-start:solid;
border-block-end:dashed;
border-block-color:lime;
border-block-width:8px 6px;

On a <p>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

On a <div>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
On a <table>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-inline and border-block longhand properties

border-inline-start-style:dashed;
border-inline-end-style:dashed;
border-inline-start-color:lime;
border-inline-end-color:lime;
border-inline-start-width:8px;
border-inline-end-width:6px;

same as above but with border-block, style solid and color orange.

On a <p>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

On a <div>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.
On a <table>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-radius logical properties

border-start-start-radius: 80px 80px;
border-start-end-radius: 50%;
border-end-start-radius: 250px 100px;
border-end-end-radius: 80px 80px;
On a <div>. Lorem ipsum dolor sit amet consectetur, adipisicing elit.

caniemail.com, 2022.