VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Bo tròn góc trong CSS


Giới thiệu CSS3
Border Image trong CSS

Nội dung chính

  • Bo tròn góc (Rounded Corner) trong CSS
  • Ví dụ bo tròn góc trong CSS
  • Thiết lập thuộc tính cho mỗi góc trong CSS

Bo tròn góc (Rounded Corner) trong CSS

Bo tròn góc (Rounded Corner) trong CSS được sử dụng để thêm góc màu tới phần thân tài liệu hoặc phần văn bản bởi sử dụng thuộc tính border-radius. Cú pháp đơn giản của Rounded Corner như sau:


#rcorners7 {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px; 
   width: 200px;
   height: 150px; 
}

Bảng dưới liệt kê một số giá trị mà Rounded Corner có thể nhận:

Giá trị Mô tả
border-radius Sử dụng phần tử này để thiết lập 4 thuộc tính border radius
border-top-left-radius Sử dụng phần tử này để thiết lập góc trái trên cùng của border
border-top-right-radius Sử dụng phần tử này để thiết lập góc phải trên cùng của border
border-bottom-right-radius Sử dụng phần tử này để thiết lập góc phải dưới cùng của border
border-bottom-left-radius Sử dụng phần tử này để thiết lập góc trái dưới cùng của border


Ví dụ bo tròn góc trong CSS

Thuộc tính này có thể có ba giá trị. Ví dụ sau sử dụng cả hai giá trị:


<html>
<head>
<meta charset="UTF-8">

  <style>
	 #rcorners1 {
		border-radius: 25px;
		background: #8AC007;
		padding: 20px;
		width: 200px;
		height: 150px;
	 }
	 #rcorners2 {
		border-radius: 25px;
		border: 2px solid #8AC007;
		padding: 20px; 
		width: 200px;
		height: 150px;
	 }
	 #rcorners3 {
		border-radius: 25px;
		background: url(paper.gif);
		background-position: left top;
		background-repeat: repeat;
		padding: 20px; 
		width: 200px;
		height: 150px;
	 }
  </style>
  
</head>
<body>
  <p id="rcorners1">Ví dụ bo tròn góc trong CSS!</p>
  <p id="rcorners2">Ví dụ bo tròn góc trong CSS!</p>
  <p id="rcorners3">Ví dụ bo tròn góc trong CSS!</p>
</body>
</html>

Kết quả:


Thiết lập thuộc tính cho mỗi góc trong CSS

Chúng ta có thể thiết lập thuộc tính cho mỗi góc như trong ví dụ sau:


<html>
<head>
<meta charset="UTF-8">

  <style>
	 #rcorners1 {
		border-radius: 15px 50px 30px 5px;
		background: #a44170;
		padding: 20px; 
		width: 100px;
		height: 100px; 
	 }
	 #rcorners2 {
		border-radius: 15px 50px 30px;
		background: #a44170;
		padding: 20px;
		width: 100px;
		height: 100px; 
	 }
	 #rcorners3 {
		border-radius: 15px 50px;
		background: #a44170;
		padding: 20px; 
		width: 100px;
		height: 100px; 
	 }
  </style>
  
</head>
<body>
  <p id="rcorners1"></p>
  <p id="rcorners2"></p>
  <p id="rcorners3"></p>
</body>
</html>

Kết quả:


Giới thiệu CSS3
Border Image trong CSS

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSS

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml