ป้ายกำกับ: css เส้นขอบ

Lv.20 CSS Borders

Posted on by alsoon

CSS Borders ช่วยให้เราสามารถกำหนดรูปแบบ ความกว้าง และสีเส้นขอบของอิลิเมนต์ได้

CSS Borders Style

border-style กำหนดชนิดของเส้นขอบที่จะแสดงผล

  • dotted เส้นประ
  • dashed เส้นประ
  • solid เส้นทึบ
  • double เส้นขอบ 2 เส้น
  • groove เส้นขอบเป็นร่อง
  • ridge ดูตัวอย่างนะ
  • inset ดูตัวอย่างนะ
  • outset ดูตัวอย่างนะ
  • none ไม่มีเส้นขอบ
  • hidden ซ่อนเส้นขอบ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Border Style</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p.dotted {border-style: dotted;}
			p.dashed {border-style: dashed;}
			p.solid {border-style: solid;}
			p.double {border-style: double;}
			p.groove {border-style: groove;}
			p.ridge {border-style: ridge;}
			p.inset {border-style: inset;}
			p.outset {border-style: outset;}
			p.none {border-style: none;}
			p.hidden {border-style: hidden;}
			p.mix {border-style: dotted dashed solid double;}
		</style>
	</head>
	<body>

		<p class="dotted">A dotted border.</p>
		<p class="dashed">A dashed border.</p>
		<p class="solid">A solid border.</p>
		<p class="double">A double border.</p>
		<p class="groove">A groove border.</p>
		<p class="ridge">A ridge border.</p>
		<p class="inset">An inset border.</p>
		<p class="outset">An outset border.</p>
		<p class="none">No border.</p>
		<p class="hidden">A hidden border.</p>
		<p class="mix">A mixed border.</p>

	</body>
</html>

CSS Border Width

เพิ่มความหนาของเส้นขอบได้ โดยใช้ border-width สามารถใช้ได้ทั้ง เส้นบน เส้นขวา เส้นล่าง และเส้นซ้าย

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Border Width</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p.p1 {
				border-style: solid;
				border-width: 10px 100px; /* เส้นบนและล่างกว้าง 10 พิกเซล เส้นซ้ายและขวากว้าง 50 พิกเซล */
			}
			
			p.p2 {
				border-style: solid;
				border-width: 150px 15px; /* เส้นบนและล่างกว้าง 150 พิกเซล เส้นซ้ายและขวากว้าง 15 พิกเซล */
			}
			
			p.p3 {
				border-style: solid;
				border-width: 3px 500px 200px 30px; /* เส้นบนกว้าง 3 พิกเซล เส้นขวากว้าง 500 พิกเซล เส้นล่างกว่าง 200 พิกเซล เส้นซ้ายขวากว้าง 30 พิกเซล */
			}
		</style>
	</head>
	<body>

		<p class="p1">ไม่รู้จะเขียนอะไรดี P1</p>
		<p class="p2">ไม่รู้จะเขียนอะไรดี P2</p>
		<p class="p3">ไม่รู้จะเขียนอะไรดี P3</p>

	</body>
</html>

CSS Border Color

เป็นการกำหนดสีให้เส้นขอบ โดยใช้ border-color สีที่ใช้ได้สามารถดูได้ ที่นี่

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Borders</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p.p1 {
				border-color: hsl(0, 84%, 28%);
				border-style: solid;
				border-width: 10px 100px; /* เส้นบนและล่างกว้าง 10 พิกเซล เส้นซ้ายและขวากว้าง 50 พิกเซล */
			}
			
			p.p2 {
				border-color: rgb(44, 255, 71);
				border-style: solid;
				border-width: 150px 15px; /* เส้นบนและล่างกว้าง 150 พิกเซล เส้นซ้ายและขวากว้าง 15 พิกเซล */
			}
			
			p.p3 {
				border-color: #000047;
				border-style: solid;
				border-width: 3px 500px 200px 30px; /* เส้นบนกว้าง 3 พิกเซล เส้นขวากว้าง 500 พิกเซล เส้นล่างกว่าง 200 พิกเซล เส้นซ้ายขวากว้าง 30 พิกเซล */
			}
		</style>
	</head>
	<body>

		<p class="p1">ไม่รู้จะเขียนอะไรดี P1</p>
		<p class="p2">ไม่รู้จะเขียนอะไรดี P2</p>
		<p class="p3">ไม่รู้จะเขียนอะไรดี P3</p>

	</body>
</html>

CSS Border เขียนบรรทัดเดียวง่ายกว่าไหม

บางครั้งการเขียนหลายๆบรรทัดก็เหนื่อย จะดีกว่าไหมย่อให้มันสั้นๆ เหลือแค่บรรทัดเดียวเลยละกัน

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Borders</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p.p1 {
				border: 10px groove hsl(0, 84%, 28%);
			}
			
			p.p2 {
				border-left: 10px double rgb(44, 255, 71);
			}
			
			p.p3 {
				border-bottom: 30px dashed #000047;
			}
		</style>
	</head>
	<body>

		<p class="p1">ไม่รู้จะเขียนอะไรดี P1</p>
		<p class="p2">ไม่รู้จะเขียนอะไรดี P2</p>
		<p class="p3">ไม่รู้จะเขียนอะไรดี P3</p>

	</body>
</html>

CSS Rounded Borders

เป็นการทำให้เส้นขอบโค้งมนได้ โดยใช้ border-radius

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Borders</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p.p1 {
				padding: 10px;
				border: 10px groove hsl(0, 84%, 28%);
				border-radius: 20px;
			}
			
			p.p2 {
				padding: 10px;
				border-left: 10px double rgb(44, 255, 71);
				border-radius: 10px;
			}
			
			p.p3 {
				padding: 10px;
				border-bottom: 30px dashed #000047;
				border-radius: 100px;
			}
		</style>
	</head>
	<body>

		<p class="p1">ไม่รู้จะเขียนอะไรดี P1</p>
		<p class="p2">ไม่รู้จะเขียนอะไรดี P2</p>
		<p class="p3">ไม่รู้จะเขียนอะไรดี P3</p>

	</body>
</html>
Top