Menu
CoddyTech
Bắt đầu học

Đường viền và bán kính

Bài học 5 trên 8 trong khóa học Dự án CSS: nút bấm bắt mắt của Coddy.

Phần tử button trong HTML có đường viền mặc định, hãy tùy chỉnh nó!

Để tạo đường viền bo tròn, hãy dùng thuộc tính border-radius (dùng cùng giá trị như trong padding hoặc margin), ví dụ:

#rounded {
	border-radius: 8px;
}

Để xóa hoàn toàn đường viền, bạn có thể ghi đè bằng cách dùng:

#no-border {
	border: none;
}

Mẹo: nếu đặt border-radius thành một giá trị lớn, phần tử sẽ có hình tròn!

challenge icon

Thử thách

Dễ

Nhiệm vụ:

  1. Đổi bán kính đường viền thành giá trị lớn hơn 0
  2. Đổi đường viền sang kiểu khác với mặc định

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML ở đây -->
    </body>
</html>

Tất cả bài học trong Dự án CSS: nút bấm bắt mắt

1Giới thiệu

Giới thiệuPhần HTML

2Dự án CSS

Kích thướcBài học dự ánMàu sắcBài học dự ánĐường viền và bán kínhBài học dự ánBóngBài học dự ánHiệu ứng di chuộtBài học dự ánTạo kiểu cuối cùngBài học dự án

Tự luyện tập: Playground Web