Learn

The forum of documents and methods for study - Lượm lặt kiến thức


Create a colored border around text with HTML and CSS

QaniTri
QaniTri
Admin

Nam Libra Monkey
Tổng số bài gửi : 1492
Tiền xu Ⓑ : 3758
Được cảm ơn № : 2
Ngày khởi sự Ngày khởi sự : 07/01/2013
Đến từ Đến từ : HCMC
Côngviệc / Sởthix Côngviệc / Sởthix : Languages, Softwares, Sciences, Martial arts

Create a colored border around text with HTML and CSS Empty Create a colored border around text with HTML and CSS

Bài gửi by QaniTri on 5th March 2016, 03:05

Create a colored border around text with HTML and CSS


Create a colored border around text with HTML and CSS Box-border
A border in your HTML pages can help bring attention to a section of text or surround any other HTML element.


As can be seen below a border can be created around any text using HTML  and CSS  on your web page. In the example below we have surrounded a paragraph < p > < /p > with a red border.


First example with text surrounded by a red border.
This example also has multiple lines.



To create the above example the below code was used.

Code:
<p style="border:3px; border-style:solid; border-color:#FF0000; padding: 1em;">First example with text surrounded by a red border.<br>This example also has multiple lines.</p>



In the above code, the style is defining the border size (px short for pixel ), style type, and border color. The style of the border is how the border appears on screen. Other types of border styles include dotted, dashed, double, groove, ridge, inset, and outset. The border color defines the color you want to use for the border. In the above example, the color code  #FF0000  was used, which is the color code for red.


Defining style using CSS



The style of how something appears on a web page can also be done with CSS code placed into the < head > < /head > section of your HTML page or in an external CSS file so it affects all pages using the CSS file. For example, with the below CSS code a new class called "borderexample" is being created that can be applied to any other HTML tag.


Code:
<style>
.borderexample
{
border-style:solid;
border-color:#287EC7;

</style>



Using the above code if you wanted to apply this border style to an HTML paragraph you could type something similar to the example below.


Code:
[size=13]<p class="borderexample">This is an example of a border created using CSS</p>[/size]


Additional information





computerhope.com


    Hôm nay: 22nd September 2020, 14:13