HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี
Colors RGB HEX HSL
พื้นหลัง CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS Borders
พรมแดน ความกว้างของเส้นขอบ เส้นขอบสี ชายแดน ชวเลขชายแดน ขอบมน
CSS Margins
Margins Margin Collapse
CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS Text
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
แบบอักษร CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float
Float Clear Float Examples
CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS
Navbar Vertical Navbar Horizontal Navbar
CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients
Linear Gradients Radial Gradients Conic Gradients
CSS Shadows
Shadow Effects Box Shadow
เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

CSS Rounded Borders

❮ ก่อนหน้า ถัดไป ❯

CSS Rounded Borders

คุณสมบัติborder-radiusนี้ใช้เพื่อเพิ่มขอบโค้งมนให้กับองค์ประกอบ:

เส้นขอบปกติ

ขอบกลม

ขอบกลม

ชายแดนที่กลมที่สุด

ตัวอย่าง

p {
  border: 2px solid red;
  border-radius: 5px;
}

ตัวอย่างเพิ่มเติม


ตัวอย่างนี้สาธิตคุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติทั้งหมดสำหรับเส้นขอบบนในการประกาศครั้งเดียว


ตัวอย่างนี้สาธิตวิธีการตั้งค่าลักษณะของเส้นขอบด้านล่าง


ตัวอย่างนี้สาธิตวิธีการกำหนดความกว้างของเส้นขอบด้านซ้าย


ตัวอย่างนี้สาธิตวิธีการตั้งค่าสีของเส้นขอบทั้งสี่ สามารถมีได้ตั้งแต่หนึ่งถึงสี่สี


ตัวอย่างนี้สาธิตวิธีการตั้งค่าสีของเส้นขอบด้านขวา

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

ใช้คุณสมบัติ border shorthand เพื่อตั้งค่าเส้นขอบ "4px", "dotted", "red" สำหรับองค์ประกอบ <p>

<style>
p {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

คุณสมบัติ CSS Border ทั้งหมด

Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corners
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

❮ ก่อนหน้า ถัดไป ❯