Border trong CSS3

Thiết kế các hình, đường viền là một phần công việc thường xuyên trong lập trình web front end nhưng không hề dễ dàng. Trong phiên bản CSS3 công việc này trở nên dễ dàng hơn nhiều.

CSS3 cung cấp hai thuộc tính mới để tạo kiểu đường viền của một phần tử theo cách thanh lịch hơn – thuộc tính border-image để thêm hình ảnh vào đường viền và thuộc tính border-radius để tạo các góc bo tròn mà không cần sử dụng bất kỳ hình ảnh nào như trong phiên bản trước.

Phần sau sẽ mô tả cho bạn các thuộc tính đường viền mới này của CSS3, để biết các thuộc tính liên quan đến đường viền khác, vui lòng xem bài viết Border trong CSS.

Tạo đường viền bo tròn trong CSS3

Thuộc tính border-radius trong CSS3 có thể được sử dụng để tạo các góc tròn. Thuộc tính này thường xác định hình dạng của góc của cạnh viền ngoài. Trước CSS3, việc sử dụng hình ảnh để tạo các góc tròn khá khó chịu.

Ví dụ ta có HTML:

<div class = "box" ></div>

CSS để tạo góc bo tròn:

.box {
    width: 300px;
    height: 150px;
    background: yellow;
    border: 2px solid #003999;
    border-radius: 20px;
}

Kết quả ta có như sau:

Và trong nhiều trường hợp ta có thể dễ dàng tạo hình tròn như sau:

HTML:

<div class = "box" ></div>

CSS:

.box {
    width: 150px;
    height: 150px;
    background: yellow;
    border: 2px solid #003999;
    border-radius: 50%;
}

Kết quả ta được:

Tạo đường viền có hình ảnh với CSS3

Thuộc tính border-image trong CSS3 cho phép bạn chỉ định một hình ảnh hoạt động như một đường viền của phần tử.

Thiết kế của đường viền được tạo từ các cạnh và góc của hình ảnh được chỉ định trong URL ảnh của đường viền. Hình ảnh đường viền có thể được cắt (slice), lặp lại (repeat), co kéo (scale) và kéo dài (stretch) theo nhiều cách khác nhau để vừa với kích thước của vùng hình ảnh đường viền.

Trong đó, border-image là viết tắt của các thuộc tính sau:

• border-image-source: Đường dẫn đến hình ảnh được sử dụng làm đường viền
• border-image-slice: Cách cắt hình ảnh theo đường viền
• border-image-width: Chiều rộng của hình ảnh đường viền
• border-image-outset: Số lượng mà vùng hình ảnh đường viền mở rộng ra ngoài viền hộp
• border-image-repeat: Xác định ảnh đường viền nên được lặp lại (repeat), làm tròn (round) hay kéo dài (stretch). Trong đó, round sẽ giúp các điểm giữa các cạnh được tiếp nối vừa vặn hơn.

Ví dụ ta có HTML:

<div class="box"></div>

CSS:

.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    -webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
    border-image: url("border.png") 30 30 round;
}

Kết quả ta được:

Tổng kết

Như vậy, bài viết này đã giúp bạn biết được cách tạo các đường viền bo tròn thanh lịch với thuộc tính border-radius trong CSS3 cũng như tạo các đường viền độc đáo với ảnh.

Học tiếp: Update…

Đọc thêm: Bộ chọn thuộc tính trong CSS