<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Border Archives - scmGalaxy</title>
	<atom:link href="https://www.scmgalaxy.com/tutorials/tag/border/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.scmgalaxy.com/tutorials/tag/border/</link>
	<description>A Platform for Software Engineers</description>
	<lastBuildDate>Wed, 13 Apr 2022 16:34:31 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>
	<item>
		<title>How to create a creative rotated text border effect &#038; social media icons hover transforms using HTML &#038; CSS?</title>
		<link>https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-rotated-text-border-effect-social-media-icons-hover-transforms-using-html-css/</link>
					<comments>https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-rotated-text-border-effect-social-media-icons-hover-transforms-using-html-css/#respond</comments>
		
		<dc:creator><![CDATA[rajeshkumar]]></dc:creator>
		<pubDate>Thu, 09 Sep 2021 12:24:27 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Border]]></category>
		<category><![CDATA[creative]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[hover]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[media]]></category>
		<category><![CDATA[rotated]]></category>
		<category><![CDATA[transforms]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=8908</guid>

					<description><![CDATA[<p>In this blog, I am creating a creative rotated text border effect &#38; social media icons hover transforms using HTML [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-rotated-text-border-effect-social-media-icons-hover-transforms-using-html-css/">How to create a creative rotated text border effect &#038; social media icons hover transforms using HTML &#038; CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">In this blog, I am creating a creative rotated text border effect &amp; social media icons hover transforms using <strong>HTML </strong>&amp; <strong>CSS</strong>. So, Let’s create an <strong>index.html &amp; style.css </strong>below-</p>



<script src="https://gist.github.com/ajcotocus/dd85011e8e393f91b53193cbd6ddfc31.js"></script>



<script src="https://gist.github.com/ajcotocus/8283b9e40d5751ca60ed106a48ef4120.js"></script>



<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="512" height="474" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-60.png" alt="" class="wp-image-8909" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-60.png 512w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-60-300x278.png 300w" sizes="(max-width: 512px) 100vw, 512px" /><figcaption>Creative rotated text border effect using CSS transforms after hover</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/ae85c7407fe9921b3d4e71cf8da638be.js"></script>



<script src="https://gist.github.com/ajcotocus/6d632ea4fcf6ddcdc2a0a649ebed2d9a.js"></script>



<figure class="wp-block-image size-full"><img decoding="async" width="490" height="242" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-61.png" alt="" class="wp-image-8910" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-61.png 490w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-61-300x148.png 300w" sizes="(max-width: 490px) 100vw, 490px" /><figcaption>Fill Text Effect On Hover before hover</figcaption></figure>



<figure class="wp-block-image size-full"><img decoding="async" width="557" height="209" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-62.png" alt="" class="wp-image-8911" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-62.png 557w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-62-300x113.png 300w" sizes="(max-width: 557px) 100vw, 557px" /><figcaption>Fill Text Effect On Hover after hover</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/58b388f7fd0321f27697b7a24e3e35ad.js"></script>



<script src="https://gist.github.com/ajcotocus/a8d5c1c688b18b39ca09825ba9973c7a.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="793" height="236" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-63.png" alt="" class="wp-image-8912" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-63.png 793w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-63-300x89.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-63-768x229.png 768w" sizes="auto, (max-width: 793px) 100vw, 793px" /><figcaption>social media icons hover effect with CSS transforms before hover</figcaption></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="776" height="212" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-64.png" alt="" class="wp-image-8913" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-64.png 776w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-64-300x82.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-64-768x210.png 768w" sizes="auto, (max-width: 776px) 100vw, 776px" /><figcaption> social media icons hover effect with CSS transforms after hover </figcaption></figure>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-rotated-text-border-effect-social-media-icons-hover-transforms-using-html-css/">How to create a creative rotated text border effect &#038; social media icons hover transforms using HTML &#038; CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-rotated-text-border-effect-social-media-icons-hover-transforms-using-html-css/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to create a creative border card hover effect with a background translation using HTML &#038; CSS?</title>
		<link>https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-border-card-hover-effect-with-a-background-translation-using-html-css/</link>
					<comments>https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-border-card-hover-effect-with-a-background-translation-using-html-css/#respond</comments>
		
		<dc:creator><![CDATA[rajeshkumar]]></dc:creator>
		<pubDate>Thu, 09 Sep 2021 11:48:13 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Background]]></category>
		<category><![CDATA[Border]]></category>
		<category><![CDATA[card]]></category>
		<category><![CDATA[creative]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[hover]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[translation]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=8890</guid>

					<description><![CDATA[<p>In this blog, I am creating creative a border card hover effect with a background translation using HTML &#38; CSS. [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-border-card-hover-effect-with-a-background-translation-using-html-css/">How to create a creative border card hover effect with a background translation using HTML &#038; CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">In this blog, I am creating creative a border card hover effect with a background translation using <strong>HTML </strong>&amp; <strong>CSS</strong>. So, Let’s create an <strong>index.html &amp; style.css </strong>below-</p>



<script src="https://gist.github.com/ajcotocus/e54e597e0566b2ba4412d42b24d7b453.js"></script>



<script src="https://gist.github.com/ajcotocus/e5c999f96255b10745e5ab9f148f0c28.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="671" height="427" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-49.png" alt="" class="wp-image-8893" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-49.png 671w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-49-300x191.png 300w" sizes="auto, (max-width: 671px) 100vw, 671px" /><figcaption>background translation card effect</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/227f83e6f42c60db431fc9f10ff5c736.js"></script>



<script src="https://gist.github.com/ajcotocus/4479341f34de07338f3e7bedfefc12c7.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="607" height="637" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-50.png" alt="" class="wp-image-8894" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-50.png 607w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-50-286x300.png 286w" sizes="auto, (max-width: 607px) 100vw, 607px" /><figcaption>creative border card hover effect</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/e4f0fe7fc93310457492478a997b2083.js"></script>



<script src="https://gist.github.com/ajcotocus/59f812de1a9553eef9b3c04122fbe829.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="800" height="493" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-51.png" alt="" class="wp-image-8895" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-51.png 800w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-51-300x185.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-51-768x473.png 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /><figcaption>creative Transactions card effect</figcaption></figure>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-border-card-hover-effect-with-a-background-translation-using-html-css/">How to create a creative border card hover effect with a background translation using HTML &#038; CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-border-card-hover-effect-with-a-background-translation-using-html-css/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to create a creative menu border rotation &#038; sniper effect using HTML &#038; CSS?</title>
		<link>https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-menu-border-rotation-sniper-effect-using-html-css/</link>
					<comments>https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-menu-border-rotation-sniper-effect-using-html-css/#respond</comments>
		
		<dc:creator><![CDATA[rajeshkumar]]></dc:creator>
		<pubDate>Tue, 07 Sep 2021 13:05:18 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Border]]></category>
		<category><![CDATA[creative]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[rotation]]></category>
		<category><![CDATA[sniper]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=8847</guid>

					<description><![CDATA[<p>In this blog, I am creating creative a menu border rotation effect using HTML &#38; CSS. So, Let’s create an index.html [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-menu-border-rotation-sniper-effect-using-html-css/">How to create a creative menu border rotation &#038; sniper effect using HTML &#038; CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">In this blog, I am creating creative a menu border rotation effect using <strong>HTML </strong>&amp; <strong>CSS</strong>. So, Let’s create an <strong>index.html &amp; style.css </strong>below-</p>



<script src="https://gist.github.com/ajcotocus/12c5b84780f43fc768a3663125ca9301.js"></script>



<script src="https://gist.github.com/ajcotocus/f39ae7716ee54459af2979668d55f035.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1020" height="160" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-45.png" alt="" class="wp-image-8854" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-45.png 1020w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-45-300x47.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-45-768x120.png 768w" sizes="auto, (max-width: 1020px) 100vw, 1020px" /><figcaption>border sniper menu effect</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/c476c9a022c96f5d85a067c8b76c7c5f.js"></script>



<script src="https://gist.github.com/ajcotocus/e8f859f882829e3bad750ddaaf151362.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="554" height="697" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-46.png" alt="" class="wp-image-8857" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-46.png 554w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-46-238x300.png 238w" sizes="auto, (max-width: 554px) 100vw, 554px" /><figcaption>creative colorful layered menu effect</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/d71f63743c1e24bc5514b3212f289336.js"></script>



<script src="https://gist.github.com/ajcotocus/70cd1e05ff4dd7f37e2258e132068a92.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1019" height="171" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-47.png" alt="" class="wp-image-8859" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-47.png 1019w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-47-300x50.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-47-768x129.png 768w" sizes="auto, (max-width: 1019px) 100vw, 1019px" /><figcaption>creative menu border rotation effect</figcaption></figure>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-menu-border-rotation-sniper-effect-using-html-css/">How to create a creative menu border rotation &#038; sniper effect using HTML &#038; CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.scmgalaxy.com/tutorials/how-to-create-a-creative-menu-border-rotation-sniper-effect-using-html-css/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to use border-left Property in CSS?</title>
		<link>https://www.scmgalaxy.com/tutorials/how-to-use-border-left-property-in-css/</link>
					<comments>https://www.scmgalaxy.com/tutorials/how-to-use-border-left-property-in-css/#respond</comments>
		
		<dc:creator><![CDATA[rajeshkumar]]></dc:creator>
		<pubDate>Tue, 03 Aug 2021 13:06:56 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Border]]></category>
		<category><![CDATA[border-left-style]]></category>
		<category><![CDATA[border-left-width]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[property]]></category>
		<category><![CDATA[style]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=7332</guid>

					<description><![CDATA[<p>The border is a Property in CSS which is used in Element with the help of css. So below border-left [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-use-border-left-property-in-css/">How to use border-left Property in CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">The border is a Property in CSS which is used in Element with the help of css. So below border-left property &#8211;</p>



<ul class="wp-block-list"><li>border-left-style</li><li>border-left-width</li><li>border-left-color</li><li>border-left</li></ul>



<h3 class="wp-block-heading"><strong>border-left-style</strong>&#8211;</h3>



<ul class="wp-block-list"><li>none &#8211; This is default which specifies no border.</li><li>hidden – This is very similar to none value, except in border conflict resolution for table elements</li><li>solid – It specifies a solid border</li><li>dotted – It specifies a dotted border</li><li>double – It specifies a double border</li><li>dashed – It specifies a dashed border</li><li>groove – It specifies a 3D grooved border.</li><li>ridge – It specifies a 3D ridged border.</li><li>inset – It specifies a 3D inset border.</li><li>outset – It specifies a 3D outset border.</li></ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="463" height="450" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-11.png" alt="" class="wp-image-7340" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-11.png 463w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-11-300x292.png 300w" sizes="auto, (max-width: 463px) 100vw, 463px" /></figure>



<h3 class="wp-block-heading"><strong>border-left-width</strong>&#8211;</h3>



<ul class="wp-block-list"><li>medium – This is default value which specifies a medium left border.</li><li>thin – It specifies a thin left border</li><li>thick – It specifies a thick left border</li><li>length – We can define left border length in the form of % px etc.</li></ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="330" height="110" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-12.png" alt="" class="wp-image-7341" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-12.png 330w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-12-300x100.png 300w" sizes="auto, (max-width: 330px) 100vw, 330px" /></figure>



<h3 class="wp-block-heading"><strong>border-left-color</strong>&#8211;</h3>



<ul class="wp-block-list"><li>color value</li><li>transparent</li></ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="989" height="481" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-13.png" alt="" class="wp-image-7342" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-13.png 989w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-13-300x146.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-13-768x374.png 768w" sizes="auto, (max-width: 989px) 100vw, 989px" /></figure>



<h3 class="wp-block-heading"><strong>border-left</strong>&#8211;</h3>



<p class="wp-block-paragraph"><strong>Syntax:-</strong></p>



<p class="wp-block-paragraph"><strong>selector{ border-left: border-left-width border-left-style border-left-color;}</strong></p>



<p class="wp-block-paragraph"><strong>Ex:-</strong></p>



<p class="wp-block-paragraph"><strong>p{ border-left: 10px solid red;}</strong></p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="220" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-14-1024x220.png" alt="" class="wp-image-7343" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-14-1024x220.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-14-300x64.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-14-768x165.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-14.png 1123w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-use-border-left-property-in-css/">How to use border-left Property in CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.scmgalaxy.com/tutorials/how-to-use-border-left-property-in-css/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>CSS border- collapse property</title>
		<link>https://www.scmgalaxy.com/tutorials/css-border-collapse-property/</link>
					<comments>https://www.scmgalaxy.com/tutorials/css-border-collapse-property/#respond</comments>
		
		<dc:creator><![CDATA[shashank K]]></dc:creator>
		<pubDate>Mon, 26 Jul 2021 09:57:44 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Border]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Web Development]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=7043</guid>

					<description><![CDATA[<p>This property set the border of the table cells ans specifies wheather the table cells share the seprate or common [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/css-border-collapse-property/">CSS border- collapse property</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">This property set the border of the table cells ans specifies wheather the table cells share the seprate or common border.</p>



<p class="wp-block-paragraph">This property has two main values that are seprate and collapse. When it is set to the value seprate, distance between the cells can be defined using the border-specing property. When the border-collapse is set to the value collapse, then the inset value of the border-style property behaves like groove, and the outset value behave like ridge. </p>



<p class="wp-block-paragraph"><strong>Syntax:-</strong></p>



<p class="wp-block-paragraph">border-collapse: separate| collapse| initial | inherit;</p>



<p class="wp-block-paragraph"><strong>Property values:- </strong></p>



<p class="wp-block-paragraph"><strong>seprate:- </strong>It is the default value that seprates the border of the table cell. Using the value, each cell will display its own border.</p>



<p class="wp-block-paragraph"><strong>collapse:- </strong>The value is used to collapse the borders into a single border. Using this, two adjacent table cells will share a border. When this value is applied, the border-spacing property does not affect.</p>



<p class="wp-block-paragraph"><strong>initial:- </strong>It sets the property to its default value.</p>



<p class="wp-block-paragraph"><strong>inherit: </strong>It inherits the propperty form its parent element.</p>



<p class="wp-block-paragraph"><strong>Example- Using seprate value</strong></p>



<script src="https://gist.github.com/shashank969/20766d7c7ee0f26ef139373e89ecbbce.js"></script>



<p class="wp-block-paragraph"><strong>Example:- Using collapse property:-</strong></p>



<script src="https://gist.github.com/shashank969/585cbc601a1d74d335b780fec47f5134.js"></script>



<p class="wp-block-paragraph"></p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/css-border-collapse-property/">CSS border- collapse property</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.scmgalaxy.com/tutorials/css-border-collapse-property/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
