{"id":3035,"date":"2022-05-21T11:50:50","date_gmt":"2022-05-21T11:50:50","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3035"},"modified":"2023-06-12T14:31:03","modified_gmt":"2023-06-12T14:31:03","slug":"css-tutorial-how-to-add-text-in-borders-using-basic-html-elements","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-how-to-add-text-in-borders-using-basic-html-elements\/","title":{"rendered":"CSS Tutorial – How to Add Text in Borders Using Basic HTML Elements"},"content":{"rendered":"

Rengga Dev<\/strong><\/a> <\/span>– Some HTML elements come with preset designs, like the inconveniently small squares of\u00a0<input type=\"checkbox\"><\/code>\u00a0elements, the limited-color bars of\u00a0<meter><\/code>\u00a0elements, and the \u201csomething about them bothers me\u201d arrows of the\u00a0<details><\/code>\u00a0elements. We can style them to match the modern aesthetics of our websites while making use of their functionalities. There are also many elements that rarely get used as\u00a0both<\/em>\u00a0their default appearance and functionality are less needed in modern web designs.<\/p>\n

One such HTML element is\u00a0<fieldset><\/code>, along with its child element\u00a0<legend><\/code>.<\/p>\n

A\u00a0<fieldset><\/code>\u00a0element is traditionally used to group and access form controls. We can visually notice the grouping by the presence of a border around the grouped content on the screen. The caption for this group is given inside the\u00a0<legend><\/code>\u00a0element that\u2019s added as the first child of the\u00a0<fieldset><\/code>.
\n