Loading Please Wait...
We can handle individual sides of border without affecting the others. CSS has border-top, border-right, border-bottom, and border-left properties for each sides.
The border-top property sets all the value for top border. We can also set different values separately by border-top-width, border-top-style, border-top-color, border-top-left-radius, border-top-right-radius, border-start-start-radius, border-start-end-radius properties.
/* top border */
border-top: dashed;
border-top: 10px solid;
border-top: 10px solid green;
/* individual properties */
border-top-width: 0.25rem;
border-top-style: dotted;
border-top-color: rgba(0, 0, 0, 0.45);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-start-start-radius: 10px;
border-start-end-radius: 10px;
The border-right property sets all the value for right border. We can also set different values separately by border-right-width, border-right-style, border-right-color, border-top-right-radius, border-bottom-right-radius, border-start-end-radius, border-end-end-radius properties.
/* right border */
border-right: dashed;
border-right: 10px solid;
border-right: 10px solid green;
/* individual properties */
border-right-width: 0.25rem;
border-right-style: dotted;
border-right-color: rgba(0, 0, 0, 0.45);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-start-end-radius: 10px;
border-end-end-radius: 10px;
The border-bottom property sets all the value for bottom border. We can also set different values separately by border-bottom-width, border-bottom-style, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-end-start-radius, border-end-end-radius properties.
/* bottom border */
border-bottom: dashed;
border-bottom: 10px solid;
border-bottom: 10px solid green;
/* individual properties */
border-bottom-width: 0.25rem;
border-bottom-style: dotted;
border-bottom-color: rgba(0, 0, 0, 0.45);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-end-start-radius: 10px;
border-end-end-radius: 10px;
The border-left property sets all the value for left border. We can also set different values separately by border-left-width, border-left-style, border-left-color, border-top-left-radius, border-bottom-left-radius, border-start-start-radius, border-end-start-radius properties.
/* left border */
border-left: dashed;
border-left: 10px solid;
border-left: 10px solid green;
/* individual properties */
border-left-width: 0.25rem;
border-left-style: dotted;
border-left-color: rgba(0, 0, 0, 0.45);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-start-start-radius: 10px;
border-end-start-radius: 10px;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved